HTML 选择下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4350937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML select dropdown list
提问by aherlambang
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?
我想要一个使用 select, option 标签的下拉列表......但是当它第一次出现时我希望它有一个信息，比如“请选择一个名字”然后用户点击下拉列表并选择可用选项......我试图将“请选择一个名称”作为一个选项，但是用户将能够选择这个......这不是我想要的。我是否需要使用 javascript 才能拥有此功能，或者我需要做什么？
If there'a jquery way to do this, this would be much helpful
如果有一种 jquery 方法可以做到这一点，这将非常有帮助
采纳答案by simshaun
Have <option value="">- Please select a name -</option>as the first option and use JavaScript (and backend validation) to ensure the user has selected something other than an empty value.
有<option value="">- Please select a name -</option>作为第一选择和使用的JavaScript（和后端验证），以确保用户选择不是空值以外的东西。
回答by Valentin Flachsel
Try this:
尝试这个：
<select>
<option value="" disabled="disabled" selected="selected">Please select a name</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>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.
当页面加载时，默认情况下将选择此选项。但是，一旦单击下拉菜单，用户将无法重新选择此选项。
Hope this helps.
希望这可以帮助。
回答by fx90034
<select>
<option value="" style="display:none">Choose one provider</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>This way the user cannot see this option, but it shows in the select box.
这样用户就看不到这个选项，但它显示在选择框中。
回答by RUTILA
This is an old post, but this worked for me
这是一个旧帖子，但这对我有用
<select>
<option value="" disabled selected>Please select a name...</option>
<option>this</option>
<option>that</option>
</select>回答by effecTor
<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>回答by Marco Leo
Maybe this can help you resolve without JavaScript http://htmlhelp.com/reference/html40/forms/option.html
也许这可以帮助您在没有 JavaScript 的情况下解决 http://htmlhelp.com/reference/html40/forms/option.html
See DISABLE option
请参阅禁用选项
回答by Yoshiyahu
Simple, I suppose. The onclick attribute works nicely...
很简单，我想。onclick 属性很好用...
<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>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.
选择不同的选项后，如果选择了第一个选项，则将选择选项 1。如果您想对 javascript 进行解释，请询问。
回答by Minal Raniga
<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>
回答by ejectamenta
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.
如果要为 jquery-ui selectmenu 控件实现相同的效果，则必须在 open 事件处理程序中设置 'display: none' 并将 '-menu' 添加到 id 字符串。
<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');
}
});
回答by Michel MARTIN
<select>
<option value="" disabled selected hidden>Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
