如何为 HTML <select> 元素设置默认值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3518002/
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
How can I set the default value for an HTML <select> element?
提问by Jichao
I thought that adding a "value"attribute set on the <select>element below would cause the <option>containing my provided "value"to be selected by default:
我认为"value"在<select>下面的元素上添加一个属性集会导致默认选择<option>包含我提供的"value"：
<select name="hall" id="hall" value="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>However, this did not work as I had expected. How can I set which <option>element is selected by default?
然而，这并没有像我预期的那样奏效。如何设置<option>默认选择哪个元素？
回答by Borealid
Set selected="selected"for the option you want to be the default.
将selected="selected"选项设置为默认值。
<option selected="selected">
3
</option>
回答by Nobita
In case you want to have a default text as a sort of placeholder/hint but not considered a valid value (something like "complete here", "select your nation" ecc.) you can do something like this:
如果您希望将默认文本作为一种占位符/提示但不被视为有效值（例如“在此处完成”，“选择您的国家”等），您可以执行以下操作：
<select>
<option value="" selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>回答by RedFilter
Complete example:
完整示例：
<select name="hall" id="hall">
<option>
1
</option>
<option>
2
</option>
<option selected>
3
</option>
<option>
4
</option>
<option>
5
</option>
</select> 回答by MindJuice
I came across this question, but the accepted and highly upvoted answer didn't work for me. It turns out that if you are using React, then setting selecteddoesn't work.
我遇到了这个问题，但被接受和高度赞成的答案对我不起作用。事实证明，如果您使用的是 React，则设置selected不起作用。
Instead you have to set a value in the <select>tag directly as shown below:
相反，您必须<select>直接在标签中设置一个值，如下所示：
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
Read more about why here on the React page.
在 React 页面上阅读更多关于原因的信息。
回答by harmender
You can do it like this:
你可以这样做：
<select name="hall" id="hall">
<option> 1 </option>
<option> 2 </option>
<option selected> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
Provide "selected" keyword inside the option tag, which you want to appear by default in your drop down list.
在选项标签内提供“selected”关键字，您希望默认情况下在下拉列表中显示该关键字。
Or you can also provide attribute to the option tag i.e.
或者您也可以为选项标签提供属性，即
<option selected="selected">3</option>
回答by Florian
if you want to use the values from a Form and keep it dynamic try this with php
如果您想使用表单中的值并保持动态，请尝试使用 php
<form action="../<SamePage>/" method="post">
<?php
$selected = $_POST['select'];
?>
<select name="select" size="1">
<option <?php if($selected == '1'){echo("selected");}?>>1</option>
<option <?php if($selected == '2'){echo("selected");}?>>2</option>
</select>
</form>
回答by Chong Lip Phang
I prefer this:
我更喜欢这个：
<select>
<option selected hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
'Choose here' disappears after an option has been selected.
选择一个选项后，“选择此处”消失。
回答by Salitha Prasad
An improvement for nobita's answer. Also you can improve the visual view of the drop down list, by hiding the element 'Choose here'.
大雄回答的改进。您还可以通过隐藏“在此处选择”元素来改进下拉列表的可视化视图。
<select>
<option selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>回答by Micha? Mielec
Best way in my opinion:
我认为最好的方法：
<select>
<option value="" selected="selected" hidden="hidden">Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Why not disabled?
为什么不禁用？
When you use disabled attribute together with <button type="reset">Reset</button>value is not reset to original placeholder. Instead browser choose first not disabled option which may cause user mistakes.
当您将禁用属性与<button type="reset">Reset</button>值一起使用时，不会重置为原始占位符。相反，浏览器首先选择未禁用的选项，这可能会导致用户错误。
Default empty value
默认空值
Every production form have validation, then empty value should not be a problem. This way we may have empty not required select.
每个生产表单都有验证，那么空值应该不是问题。这样我们可能会有空的不需要的选择。
XHTML syntax attributes
XHTML 语法属性
selected="selected"syntax is the only way to be compatible with both XHTML and HTML 5. It is correct XML syntax and some editors may be happy about this. It is more backward compatible. I do not have strong feeling about this, but if above-mention arguments are your requirements you should follow full syntax.
selected="selected"语法是与 XHTML 和 HTML 5 兼容的唯一方法。这是正确的 XML 语法，一些编辑器可能对此感到高兴。它更向后兼容。我对此没有强烈的感觉，但如果上述参数是您的要求，您应该遵循完整的语法。
回答by Ally
Another example; using JavaScript to set a selected option.
另一个例子; 使用 JavaScript 设置选定的选项。
(You could use this example to for loop an array of values into a drop down component)
（您可以使用此示例将一组值循环到下拉组件中）
<select id="yourDropDownElementId"><select/>
<select id="yourDropDownElementId"><select/>
// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);
