blocks|key|858552|text|在提交前创建一个JavaScript控件，表示所选选项与第一个选项不同|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858553|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Make a JavaScript control that before the submit cheek that the selected option is different to your first option</p>


blocks|key|1073125|text|将<option+value="">-+Please+select+a+name+-</option>作为第一个选项，并使用JavaScript+(和后端验证)来确保用户选择的值不是空值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1073126|entityMap^0|1|1E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Have <code>&lt;option value=""&gt;- Please select a name -&lt;/option&gt;</code> as the first option and use JavaScript (and backend validation) to ensure the user has selected something other than an empty value.</p>


blocks|key|1073171|text|也许这可以帮助您在没有JavaScript+http://htmlhelp.com/reference/html40/forms/option.html的情况下解决问题|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1073172|请参阅禁用选项|1073173|entityMap|0|LINK|mutability|MUTABLE|url|http://htmlhelp.com/reference/html40/forms/option.html^0|M|1I|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>Maybe this can help you resolve without JavaScript 
<a href="http://htmlhelp.com/reference/html40/forms/option.html" rel="nofollow">http://htmlhelp.com/reference/html40/forms/option.html</a></p>

<p>See DISABLE option</p>


blocks|key|858662|text|我想很简单。onclick属性可以很好地工作...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858663|​|858664|<select+onchange="if(this.value+==+'')+this.selectedIndex+=+1;+">
++<option+value="">Select+an+Option</option>
++<option+value="one">Option+1</option>
++<option+value="two">Option+2</option>
</select>|code-block|syntax|javascript|858665|858666|选择不同的选项后，如果选择第一个选项，则会选择选项1。如果你想要一个关于javascript的解释，尽管问吧。|858667|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Simple, I suppose. The onclick attribute works nicely... </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select onchange="if(this.value == '') this.selectedIndex = 1; "&gt;
  &lt;option value=""&gt;Select an Option&lt;/option&gt;
  &lt;option value="one"&gt;Option 1&lt;/option&gt;
  &lt;option value="two"&gt;Option 2&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

<p>After a different option is selected, if the first option is selected, Option 1 will be selected. If you want an explanation on the javascript, just ask.</p>


blocks|key|1073261|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1073262|​|1073263|<select>
++++<option+value=""+disabled="disabled"+selected="selected">Please+select+a+name</option>
++++<option+value="1">One</option>
++++<option+value="2">Two</option>
</select>|code-block|syntax|javascript|1073264|1073265|当页面加载时，默认情况下将选择此选项。但是，一旦单击下拉菜单，用户将无法重新选择此选项。|1073266|希望这能有所帮助。|1073267|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Try this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
    &lt;option value="" disabled="disabled" selected="selected"&gt;Please select a name&lt;/option&gt;
    &lt;option value="1"&gt;One&lt;/option&gt;
    &lt;option value="2"&gt;Two&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

<p>When the page loads, this option will be selected by default. However, as soon as the drop-down is clicked, the user won't be able to re-select this option.</p>

<p>Hope this helps.</p>


blocks|key|1073308|text|这就是我用JQuery做这件事的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1073309|使用jquery水印插件(http://code.google.com/p/jquery-watermark/)|offset|length|1073310|$('#inputId').watermark('Please+select+a+name');|code-block|syntax|javascript|1073311|就像一个护身符！|1073312|在google代码站点上有一些很好的文档。|1073313|希望这能有所帮助！|1073314|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/jquery-watermark/^0|0|D|16|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>This is how I do this with JQuery...</p>

<p>using the jquery-watermark plugin (http://code.google.com/p/jquery-watermark/)</p>

<pre><code>$('#inputId').watermark('Please select a name');
</code></pre>

<p>works like a charm!!</p>

<p>There is some good documentation at that google code site.</p>

<p>Hope this helps!</p>


blocks|key|1073333|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1073334|<select>
++++<option+value=""+style="display:none">Choose+one+provider</option>
++++<option+value="1">One</option>
++++<option+value="2">Two</option>
</select>|code-block|syntax|javascript|1073335|1073336|这样，用户看不到此选项，但它会显示在选择框中。|1073337|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
    &lt;option value="" style="display:none"&gt;Choose one provider&lt;/option&gt;
    &lt;option value="1"&gt;One&lt;/option&gt;
    &lt;option value="2"&gt;Two&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

<p>This way the user cannot see this option, but it shows in the select box.</p>


blocks|key|858787|text|我很抱歉写了一个老帖子--但我找到了一个更好的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858788|我相信这张海报想要的是：|858789|<label+for="mydropdown"+datalabel="mydropdown">Country:</label>++++
<select+name="mydropdown">
++++<option+value="United+States">United+States</option>
++++<option+value="Canada">Canada</option>
++++<option+value="Mexico">Mexico</option>
++++<option+value="Other">Not+Listed</option>
</select>|code-block|syntax|javascript|858790|在搜索同样的答案时，我在另一篇文章中找到了这个信息-谢谢|858791|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I'm sorry to necro an old post - but I found a better way of doing this</p>

<p>What I believe this poster wanted was : </p>

<pre><code>&lt;label for="mydropdown" datalabel="mydropdown"&gt;Country:&lt;/label&gt;    
&lt;select name="mydropdown"&gt;
    &lt;option value="United States"&gt;United States&lt;/option&gt;
    &lt;option value="Canada"&gt;Canada&lt;/option&gt;
    &lt;option value="Mexico"&gt;Mexico&lt;/option&gt;
    &lt;option value="Other"&gt;Not Listed&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>I found this information in another post while searching for this same answer - Thanks</p>


blocks|key|1073391|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1073392|++<select+name="test">
++++++<option+hidden="true">Please+select+a+name</option>
++++++<option+value="Cash">Cash</option>
++++++<option+value="Draft">Demand+Draft+No.</option>
++++++<option+value="Cheque">Cheque+No.</option>
++</select>|code-block|syntax|javascript|1073393|1073394|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;select name="test"&gt;
      &lt;option hidden="true"&gt;Please select a name&lt;/option&gt;
      &lt;option value="Cash"&gt;Cash&lt;/option&gt;
      &lt;option value="Draft"&gt;Demand Draft No.&lt;/option&gt;
      &lt;option value="Cheque"&gt;Cheque No.&lt;/option&gt;
  &lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1073415|text|这是一个老帖子，但这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1073416|​|1073417|<select>
++<option+value=""+disabled+selected>Please+select+a+name...</option>+
++<option>this</option>
++<option>that</option>
</select>|code-block|syntax|javascript|1073418|1073419|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>This is an old post, but this worked for me</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
  &lt;option value="" disabled selected&gt;Please select a name...&lt;/option&gt; 
  &lt;option&gt;this&lt;/option&gt;
  &lt;option&gt;that&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1073433|text|<select>
++++<option+value=""+disabled="disabled"+selected="selected">Please+select+name</option>
++<option+value="Tom">Tom</option>
++<option+value="Marry">Marry</option>
++<option+value="Jane">Jane</option>
++<option+value="Harry">Harry</option>
</select>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1073434|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;select&gt;
    &lt;option value="" disabled="disabled" selected="selected"&gt;Please select name&lt;/option&gt;
  &lt;option value="Tom"&gt;Tom&lt;/option&gt;
  &lt;option value="Marry"&gt;Marry&lt;/option&gt;
  &lt;option value="Jane"&gt;Jane&lt;/option&gt;
  &lt;option value="Harry"&gt;Harry&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|1073482|text|如果你想在jquery-ui+selectmenu控件中实现同样的效果，那么你必须在打开的事件处理程序中设置'display:+none‘，并将'-menu’添加到id字符串中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1073483|<select+id="myid">
<option+value=""+disabled="disabled"+selected="selected">Please+select+++++name</option>
+<option+value="Tom">Tom</option>
+<option+value="Marry">Mary</option>
+<option+value="Jane">Jane</option>
+<option+value="Harry">Harry</option>
+</select>

$('select#listsTypeSelect').selectmenu({
++change:+function(+event,+data+)+{
++++alert($(this).val());
},
open:+function(+event,+ui+)+{
++++$('ul#myid-menu+li:first-child').css('display',+'none');
}
});|code-block|syntax|javascript|1073484|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you want to achieve the same for the jquery-ui selectmenu control then you have to set 'display: none' in the open event handler and add '-menu' to the id string.</p>

<pre><code>&lt;select id="myid"&gt;
&lt;option value="" disabled="disabled" selected="selected"&gt;Please select     name&lt;/option&gt;
 &lt;option value="Tom"&gt;Tom&lt;/option&gt;
 &lt;option value="Marry"&gt;Mary&lt;/option&gt;
 &lt;option value="Jane"&gt;Jane&lt;/option&gt;
 &lt;option value="Harry"&gt;Harry&lt;/option&gt;
 &lt;/select&gt;

$('select#listsTypeSelect').selectmenu({
  change: function( event, data ) {
    alert($(this).val());
},
open: function( event, ui ) {
    $('ul#myid-menu li:first-child').css('display', 'none');
}
});
</code></pre>


blocks|key|1073503|text|<select>
++<option+value=""+disabled+selected+hidden>Select+an+Option</option>
++<option+value="one">Option+1</option>
++<option+value="two">Option+2</option>
</select>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1073504|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;select&gt;
  &lt;option value="" disabled selected hidden&gt;Select an Option&lt;/option&gt;
  &lt;option value="one"&gt;Option 1&lt;/option&gt;
  &lt;option value="two"&gt;Option 2&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|1073511|text|++++<select>
+++++++++<option+value=""+disabled="disabled"+selected="selected">Please+select+a+
++++++++++++++developer+position</option>
++++++++++<option+value="1">Beginner</option>
++++++++++<option+value="2">Expert</option>
+++++</select>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1073512|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>    &lt;select&gt;
         &lt;option value="" disabled="disabled" selected="selected"&gt;Please select a 
              developer position&lt;/option&gt;
          &lt;option value="1"&gt;Beginner&lt;/option&gt;
          &lt;option value="2"&gt;Expert&lt;/option&gt;
     &lt;/select&gt;
</code></pre>


<p>I want to have a drop down list using the select, option tag... but when it first appear I want it to have an information, such as "Please select a name" then the user clicks on the drop down list and selects from the available option... I tried to made the "Please select a name" as an option, but then the user will be able to select this... which is not what I want. Do I need to use javascript to have this feature or what do I need to do?</p>

<p>If there'a jquery way to do this, this would be much helpful</p>


HTML select dropdown list

我想有一个使用select，option标签的下拉列表...但是当它第一次出现时，我希望它有一个信息，比如“请选择一个名字”，然后用户点击下拉列表并从可用选项中选择...我试着让“请选择一个名字”作为一个选项，但然后用户将能够选择这...这不是我想要的。我需要使用javascript来实现这个功能吗?或者我需要做什么？...

问HTML选择下拉列表
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML选择下拉列表EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML选择下拉列表
EN