如何设置 HTML
我认为在下面的
<select name="hall" id="hall" value="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>然而，这并没有像我预期的那样起作用。如何设置默认选择哪个 元素？
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:
<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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（30）
标签的 value 属性丢失，因此它没有按您想要的选择显示。默认情况下，如果在标签上设置了 value 属性，则第一个选项显示在下拉页面加载上......我用这种方式解决了我的问题
value attribute of tag is missing, so it doesn't show as u desired selected. By default first option show on dropdown page load, if value attribute is set on tag.... I got solved my problem this way
我只需将第一个选择选项值设置为默认值，然后使用 HTML5 的新“隐藏”功能将该值隐藏在下拉列表中。像这样：
I would just simply make the first select option value the default and just hide that value in the dropdown with HTML5's new "hidden" feature. Like this:
此示例已经过测试，可以与页面上的多个
时将值设置为多个选择的情况，但是您可以修改此示例以支持这一点。向每个
使用 JavaScript 的
querySelectorAll()选择具有您刚刚添加的自定义属性的所有元素。在以下示例中，运行时，第一个
应显示选项code> 应显示所选值为admin的选项。This example has been tested to work with multiple
<select>elements on the page, and can also work with normal text elements. It has not been tested for setting the value to more than one selection when<select multiple="true">, however you can probably modify this sample to support that.Add an attribute
data-selectedto each<select>element and set the value(s) to the value of the option you wish to have selected.Use javascript's
querySelectorAll()to select all elements that have the custom attribute you just added.In the following example, when run, the first
<select>should show option with the valueuseras selected, and the second<select>should show the option with the valueadminas selected.我自己用的
I myself use it
此代码使用 PHP 设置 HTML select 元素的默认值。
This code sets the default value for the HTML select element with PHP.
您可以使用：
代替，
两者同样正确。
You can use:
instead of,
both are equally correct.
设置 selected="selected" 其中选项值为 3
请参见下面的示例
Set selected="selected" where is option value is 3
please see below example
您只需将属性“selected”放在特定选项上，而不是直接选择元素。
这是具有不同值的相同和多个工作示例的片段。
You just need to put attribute "selected" on a particular option instead direct to select element.
Here is snippet for same and multiple working example with different values.
默认选择值为 Option-4
Default selected value is Option-4
为了使该解决方案发挥作用，每个选项中都需要一个“id”属性：
该函数首先尝试查找<select>与 id，然后它将在 select> 中搜索 value_selected options，如果找到它，它将设置 selected 属性返回 true。否则为假
You will need an "id" attribute in each option for this solution to work:
The function first tries to find the <select> with the id, then it will search for the value_selected in the <select> options and if it finds it, it will set the selected attribute returning true. False otherwise
我使用这个 php 函数来生成选项，并将其插入到我的 HTML 中
，然后在我的网页代码中使用它，如下所示；
如果 $endmin 是在每次加载页面时从 _POST 变量创建的（并且此代码位于发布的表单内），则默认情况下会选择先前选择的值。
I used this php function to generate the options, and insert it into my HTML
And then in my webpage code I use it as below;
If $endmin is created from a _POST variable every time the page is loaded (and this code is inside a form which posts) then the previously selected value is selected by default.
The problem with
<select>is, it's sometimes disconnected with the state of what's currently rendered and unless something has changed in the option list, no change value is returned. This can be a problem when trying to select the first option from a list. The following code can get the first-option the first-time selected, butonchange="changeFontSize(this)"by its self would not. There are methods described above using a dummy option to force a user to make a change value to pickup the actual first value, such as starting the list with an empty value. Note: onclick would call the function twice, the following code does not, but solves the first-time problem.设置默认选项
我使用 Angular，并通过HTML 模板
脚本：
I use Angular and i set the default option by
HTML Template
Script:
你可以这样尝试
You can try like this
要使用 PHP 和 JavaScript 设置默认值：
To set the default using PHP and JavaScript:
这是选择默认选项的简单方法。
可用于 HTML 页面上的多个选择。
方法：
注意：
This is simple method to make default option selected.
Can be used for multiple selects on an HTML page.
The method:
Note:
我遇到了一些麻烦，因为我需要某种方法来根据数据库中的值动态选择选项。下面的脚本对我来说就像一个魅力：
I was having some troubles with it because I need some way to choose the option dynamically accordingly to the value that I have in the database. The script bellow works like a charm to me:
将
selected="selected"设置为您想要设为默认的选项。Set
selected="selected"for the option you want to be the default.如果您想要将默认文本作为一种占位符/提示，但不被视为有效值（例如“在此处完成”、“选择您的国家”等），您可以执行以下操作：
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:
完整示例：
Complete example:
我遇到了这个问题，但被接受和高度评价的答案对我不起作用。事实证明，如果您使用的是 React，那么设置
selected不起作用。相反，您必须直接在
阅读更多有关原因的信息 React 页面上。
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.Instead you have to set a value in the
<select>tag directly as shown below:Read more about why here on the React page.
您可以这样做：
在选项标签内提供“selected”关键字，您希望默认情况下将其显示在下拉列表中。
或者您也可以为选项标签提供属性，即
You can do it like this:
Provide "selected" keyword inside the option tag, which you want to appear by default in your drop down list.
Or you can also provide attribute to the option tag i.e.
如果你想使用表单中的值并保持动态，请尝试使用 php
if you want to use the values from a Form and keep it dynamic try this with php
我认为最好的方法：
为什么不禁用？
当您将禁用属性与
一起使用时，值不会重置到原始占位符。相反，浏览器选择第一个未禁用的选项，这可能会导致用户错误。默认空值
每个生产表单都有验证，那么空值应该不是问题。这样我们可能会有空的不需要的选择。
XHTML 语法属性
selected="selected"语法是与 XHTML 和 HTML 5 兼容的唯一方法。这是正确的 XML 语法，一些编辑器可能对此感到高兴。它更加向后兼容。如果 XML 合规性很重要，您应该遵循完整的语法。Best way in my opinion:
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.Default empty value
Every production form has validation, then empty value should not be a problem. This way we may have empty not required select.
XHTML syntax attributes
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. If XML compliance is important you should follow the full syntax.我更喜欢这样：
选择选项后“选择此处”就会消失。
I prefer this:
'Choose here' disappears after an option has been selected.
对 nobita 答案的改进。您还可以通过隐藏元素“在此处选择”来改进下拉列表的视觉视图。
An improvement for nobita's answer. Also you can improve the visual view of the drop down list, by hiding the element 'Choose here'.
另一个例子；使用 JavaScript 设置选定的选项。
（您可以使用此示例将值数组循环到下拉组件中）
Another example; using JavaScript to set a selected option.
(You could use this example to for loop an array of values into a drop down component)
selected 属性是一个布尔属性。
如果存在，它指定在页面加载时应预先选择一个选项。
预先选择的选项将首先显示在下拉列表中。
The selected attribute is a boolean attribute.
When present, it specifies that an option should be pre-selected when the page loads.
The pre-selected option will be displayed first in the drop-down list.
如果您使用 React，则可以在 select 标记中使用
defaultValue作为属性，而不是使用value。If you are in react you can use
defaultValueas attribute instead ofvaluein the select tag.如果您使用角度为 1 的 select，则需要使用 ng-init，否则，将不会选择第二个选项，因为 ng-model 会覆盖默认选定值
If you are using select with angular 1, then you need to use ng-init, otherwise, second option will not be selected since, ng-model overrides the defaul selected value