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|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|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|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|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|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|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|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|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|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|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|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来实现这个功能吗?或者我需要做什么？如果有一种jquery方法可以做到这一点，这将非常有帮助

问HTML选择下拉列表
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML选择下拉列表EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML选择下拉列表
EN