entityMap|blocks|key|1l2u8|text|完整示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8apv8|​|e8432|1+
+++
+++
++++2+
+++
+++
++++3+
+++
+++
++++4+
+++
+++
++++5|code-block|syntax|javascript|6k1hk^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|M|9|@]|A|@]|B|$H|I]]|$2|J|4|D|6|7|8|N|9|@]|A|@]|B|$]]]]

Complete example:

<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="hall" id="hall"&gt; 
 &lt;option&gt; 
 1 
 &lt;/option&gt; 
 &lt;option&gt; 
 2 
 &lt;/option&gt; 
 &lt;option selected&gt; 
 3 
 &lt;/option&gt; 
 &lt;option&gt; 
 4 
 &lt;/option&gt; 
 &lt;option&gt; 
 5 
 &lt;/option&gt; 
&lt;/select&gt; </code></pre>
</div>
</div>

entityMap|blocks|key|69bnh|text|设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c2nd4|selected="selected"|offset|length|style|CODE|1vdb5|对于您希望成为默认选项的选项。|70upt|3^0|0|0|J|0|0|0|1^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@$E|O|F|P|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|Q|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|R|9|@$E|S|F|T|G|H]]|A|@]|B|$]]]]

Set <code>selected="selected"</code> for the option you want to be the default.

<pre><code>&lt;option selected="selected"&gt;
3
&lt;/option&gt;
</code></pre>

entityMap|blocks|key|eevme|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9l6hk|1+
+++++2+
+++++3+
+++++4+
+++++5|code-block|syntax|javascript|594cj|在option标签内提供"selected“关键字，您希望该关键字默认出现在下拉列表中。|2vpo4|或者，您也可以为选项标记提供属性，即|30r9r|3|offset|length|style|CODE^0|0|0|0|0|0|1^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|S|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|T|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|U|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|V|9|@$N|W|O|X|P|Q]]|A|@]|B|$]]]]

You can do it like this:

<pre><code>&lt;select name="hall" id="hall"&gt;
 &lt;option&gt; 1 &lt;/option&gt;
 &lt;option&gt; 2 &lt;/option&gt;
 &lt;option selected&gt; 3 &lt;/option&gt;
 &lt;option&gt; 4 &lt;/option&gt;
 &lt;option&gt; 5 &lt;/option&gt;
&lt;/select&gt; 
</code></pre>

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. 

<pre><code>&lt;option selected="selected"&gt;3&lt;/option&gt;
</code></pre>

entityMap|blocks|key|8kqor|text|另一个示例；使用JavaScript设置选定的选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|44a7h|(您可以使用此示例将值的数组循环到下拉组件中)|asla9|​|c8at8|//+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);|code-block|syntax|javascript^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|O|9|@]|A|@]|B|$J|K]]]]

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)

<code>&lt;select id="yourDropDownElementId"&gt;&lt;select/&gt;</code>

<pre><code>// 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);
</code></pre>

entityMap|blocks|key|3md0c|text|如果您希望使用表单中的值并使其保持动态，请尝试使用php|type|unstyled|depth|inlineStyleRanges|entityRanges|data|52v8t|>1
++>2|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

if you want to use the values from a Form and keep it dynamic try this with php

<pre><code>&lt;form action="../&lt;SamePage&gt;/" method="post"&gt;


&lt;?php
 $selected = $_POST['select'];
?&gt;

&lt;select name="select" size="1"&gt;

 &lt;option &lt;?php if($selected == '1'){echo("selected");}?&gt;&gt;1&lt;/option&gt;
 &lt;option &lt;?php if($selected == '2'){echo("selected");}?&gt;&gt;2&lt;/option&gt;

&lt;/select&gt;
&lt;/form&gt;
</code></pre>

entityMap|blocks|key|4l8r2|text|我就是这么做的..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|afjbj|>One
+++++////////++OR++////////
++Two|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

This is how I did it...

<pre><code>&lt;form action="../&lt;SamePage&gt;/" method="post"&gt;

&lt;?php
 if ( $_POST['drop_down'] == "")
 {
 $selected = "";
 }
 else
 {
 $selected = "selected";
 }
?&gt;

&lt;select name="select" size="1"&gt;

 &lt;option value="1" &lt;?php $selected ?&gt;&gt;One&lt;/option&gt;
 //////// OR ////////
 &lt;option value="2" $selected&gt;Two&lt;/option&gt;

&lt;/select&gt;
&lt;/form&gt;
</code></pre>

entityMap|blocks|key|acr4g|text|The+The+The|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ffs33|选定|57fpc|属性是一个布尔属性。|ardag|当它出现时，它指定在页面加载时应该预先选择一个选项。|33gkk|预先选择的选项将首先显示在下拉列表中。|4bcrk|Volvo
+Saab
+VW
+Audi|code-block|syntax|javascript^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Q|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|R|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|S|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|T|9|@]|A|@]|B|$]]|$2|K|4|L|6|M|8|U|9|@]|A|@]|B|$N|O]]]]

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.

<pre><code>&lt;select&gt;
 &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
 &lt;option value="saab"&gt;Saab&lt;/option&gt;
 &lt;option value="vw"&gt;VW&lt;/option&gt;
 &lt;option value="audi" selected&gt;Audi&lt;/option&gt; 
&lt;/select&gt; 
</code></pre>

entityMap|blocks|key|8pgl1|text|我使用此php函数生成选项，并将其插入到我的HTML中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bt1kh|'+.+sprintf($formatstring,$i)+.+'+';
++++}

++return+$retstring;
++}

?>|code-block|syntax|javascript|4gnqn|然后在我的网页代码中，我使用它，如下所示；|e6hqp|如果$endmin是从|ogp5|_|ajo6m|POST变量每次加载页面时(此代码位于POST的表单中)，则在默认情况下选择先前选择的值。^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|Q|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|R|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|S|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|T|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|U|9|@]|A|@]|B|$]]]]

I used this php function to generate the options, and insert it into my HTML

<pre><code>&lt;?php
 # code to output a set of options for a numeric drop down list
 # parameters: (start, end, step, format, default)
 function numericoptions($start, $end, $step, $formatstring, $default)
 {
 $retstring = "";
 for($i = $start; $i &lt;= $end; $i = $i + $step)
 {
 $retstring = $retstring . '&lt;OPTION ';
 $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
 if($default == $i)
 {
 $retstring = $retstring . ' selected="selected"';
 }
 $retstring = $retstring . '&gt;' . sprintf($formatstring,$i) . '&lt;/OPTION&gt; ';
 }

 return $retstring;
 }

?&gt;
</code></pre>

And then in my webpage code I use it as below;

<pre><code>&lt;select id="endmin" name="endmin"&gt;
 &lt;?php echo numericoptions(0,55,5,'%02d',$endmin); ?&gt;
&lt;/select&gt;
</code></pre>

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.

entityMap|blocks|key|1kcoa|text|这段代码使用PHP设置HTML+select元素的默认值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|27ik4|".+$nr+."";
++++++++}
++++++++else{
++++++++++++echo+"".+$nr+."";
++++++++}
++++++++$nr%2B%2B;
++++}
?>|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

This code sets the default value for the HTML select element with PHP. 

<pre><code>&lt;select name="hall" id="hall"&gt;
&lt;?php
 $default = 3;
 $nr = 1;
 while($nr &lt; 10){
 if($nr == $default){
 echo "&lt;option selected=\"selected\"&gt;". $nr ."&lt;/option&gt;";
 }
 else{
 echo "&lt;option&gt;". $nr ."&lt;/option&gt;";
 }
 $nr++;
 }
?&gt;
&lt;/select&gt;
</code></pre>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|http://facebook.github.io/react/docs/forms.html|blocks|key|1knqf|text|我遇到了这个问题，但被接受的和高度肯定的答案对我来说不起作用。事实证明，如果您使用的是React，那么设置|unstyled|depth|inlineStyleRanges|entityRanges|5djlr|selected|offset|length|style|CODE|377u7|不起作用。|ap5tl|相反，您必须在|af68s|tag+directly+as+shown+below:AppleBananaCranberry|2k7oo|阅读更多关于原因的信息在React+page上|8cfnb|..。^0|0|0|8|0|0|0|0|1C|0|B|B|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|Y|G|@]|H|@]|6|$]]|$A|I|C|J|2|E|F|Z|G|@$K|10|L|11|M|N]]|H|@]|6|$]]|$A|O|C|P|2|E|F|12|G|@]|H|@]|6|$]]|$A|Q|C|R|2|E|F|13|G|@]|H|@]|6|$]]|$A|S|C|T|2|E|F|14|G|@$K|15|L|16|M|N]]|H|@]|6|$]]|$A|U|C|V|2|E|F|17|G|@]|H|@$K|18|L|19|A|1A]]|6|$]]|$A|W|C|X|2|E|F|1B|G|@]|H|@]|6|$]]]]

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 <code>selected</code> doesn't work.

Instead you have to set a value in the <code>&lt;select&gt;</code> tag directly as shown below:

<pre><code>&lt;select value="B"&gt;
 &lt;option value="A"&gt;Apple&lt;/option&gt;
 &lt;option value="B"&gt;Banana&lt;/option&gt;
 &lt;option value="C"&gt;Cranberry&lt;/option&gt;
&lt;/select&gt;
</code></pre>

Read more about why <a href="http://facebook.github.io/react/docs/forms.html">here on the React page</a>.

entityMap|blocks|key|d2e6a|text|如果您希望将默认文本作为某种占位符/提示，但不被视为有效值(类似于“在此处完成”，“选择您的国家”ecc。)你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|76dai|​|d105c|Choose+here
++One
++Two
++Three
++Four
++Five|code-block|syntax|javascript|8r0n3^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|M|9|@]|A|@]|B|$H|I]]|$2|J|4|D|6|7|8|N|9|@]|A|@]|B|$]]]]

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:

<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="" selected disabled hidden&gt;Choose here&lt;/option&gt;
 &lt;option value="1"&gt;One&lt;/option&gt;
 &lt;option value="2"&gt;Two&lt;/option&gt;
 &lt;option value="3"&gt;Three&lt;/option&gt;
 &lt;option value="4"&gt;Four&lt;/option&gt;
 &lt;option value="5"&gt;Five&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>

entityMap|blocks|key|bl1h6|text|缺少标记的值属性，因此它不会显示为所需的选定内容。默认情况下，第一个选项在下拉页面加载时显示，如果在标记上设置了value属性...我用这种方式解决了我的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

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

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://stackoverflow.com/users/1446845/nobita|blocks|key|f8ir1|text|的改进nobita你也可以通过隐藏元素'Choose+here‘来改善下拉列表的视觉效果。|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|534nb|​|399lk|Choose+here
++One
++Two
++Three
++Four
++Five|code-block|syntax|javascript|a5muj^0|3|6|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|S|G|@]|H|@$I|T|J|U|A|V]]|6|$]]|$A|K|C|L|2|E|F|W|G|@]|H|@]|6|$]]|$A|M|C|N|2|O|F|X|G|@]|H|@]|6|$P|Q]]|$A|R|C|L|2|E|F|Y|G|@]|H|@]|6|$]]]]

An improvement for <a href="https://stackoverflow.com/users/1446845/nobita">nobita</a>'s answer. Also you can improve the visual view of the drop down list, by hiding the element 'Choose here'.

<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 selected disabled hidden&gt;Choose here&lt;/option&gt;
 &lt;option value="1"&gt;One&lt;/option&gt;
 &lt;option value="2"&gt;Two&lt;/option&gt;
 &lt;option value="3"&gt;Three&lt;/option&gt;
 &lt;option value="4"&gt;Four&lt;/option&gt;
 &lt;option value="5"&gt;Five&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>

entityMap|blocks|key|2mv89|text|我自己也用它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fg389|ccc
++++xxx
++++zzz
++++aaa
++++qqq
++++wwww|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

I myself use it 

<pre><code>&lt;select selected=''&gt;
 &lt;option value=''&gt;&lt;/option&gt;
 &lt;option value='1'&gt;ccc&lt;/option&gt;
 &lt;option value='2'&gt;xxx&lt;/option&gt;
 &lt;option value='3'&gt;zzz&lt;/option&gt;
 &lt;option value='4'&gt;aaa&lt;/option&gt;
 &lt;option value='5'&gt;qqq&lt;/option&gt;
 &lt;option value='6'&gt;wwww&lt;/option&gt;
&lt;/select&gt;
</code></pre>

entityMap|blocks|key|9a8ns|text|我更喜欢这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8akg1|Choose+here
+++One
+++Two
+++Three
+++Four
+++Five|code-block|syntax|javascript|8o96q|选择选项后，“在此处选择”将消失。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

I prefer this:

<pre><code>&lt;select&gt;
 &lt;option selected hidden&gt;Choose here&lt;/option&gt;
 &lt;option value="1"&gt;One&lt;/option&gt;
 &lt;option value="2"&gt;Two&lt;/option&gt;
 &lt;option value="3"&gt;Three&lt;/option&gt;
 &lt;option value="4"&gt;Four&lt;/option&gt;
 &lt;option value="5"&gt;Five&lt;/option&gt;
&lt;/select&gt;
</code></pre>

'Choose here' disappears after an option has been selected.

entityMap|blocks|key|2u6em|text|如果使用带有角度1的select，则需要使用ng-init，否则将不会选择第二个选项，因为ng-model会覆盖缺省选定值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|59tua|Name
++Stars
++Language|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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

<pre><code>&lt;select ng-model="sortVar" ng-init='sortVar="stargazers_count"'&gt;
 &lt;option value="name"&gt;Name&lt;/option&gt;
 &lt;option selected="selected" value="stargazers_count"&gt;Stars&lt;/option&gt;
 &lt;option value="language"&gt;Language&lt;/option&gt;
&lt;/select&gt;
</code></pre>

entityMap|blocks|key|1anod|text|如果你在react中，你可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9ntvm|defaultValue|offset|length|style|CODE|b3rhr|作为属性，而不是|2q79q|value|lv3t|在select标记中。^0|0|0|C|0|0|0|5|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|P|9|@$E|Q|F|R|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|S|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|T|9|@$E|U|F|V|G|H]]|A|@]|B|$]]|$2|M|4|N|6|7|8|W|9|@]|A|@]|B|$]]]]

If you are in react you can use <code>defaultValue</code> as attribute instead of <code>value</code> in the select tag.

entityMap|blocks|key|1dpga|text|您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e7o7o|Some+Value|offset|length|style|CODE|d7p2o|而不是，|c1ll3|Some+Value|8pcso|两者都是同样正确的。^0|0|0|A|0|0|0|A|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|P|9|@$E|Q|F|R|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|S|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|T|9|@$E|U|F|V|G|H]]|A|@]|B|$]]|$2|M|4|N|6|7|8|W|9|@]|A|@]|B|$]]]]

You can use:

<pre><code>&lt;option value="someValue" selected&gt;Some Value&lt;/option&gt;
</code></pre>

instead of,

<pre><code>&lt;option value="someValue" selected = "selected"&gt;Some Value&lt;/option&gt;
</code></pre>

both are equally correct.

entityMap|blocks|key|5m46l|text|的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6a1p3|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,+but+onchange="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.++Font+SizeSmallMediumLargeExtra+largefunction+changeFontSize(x){+++++body=document.getElementById('body');+++++if+(x.value=="extraLarge")+{+++++++++body.style.fontSize="25px";+++++}+else+{+++++++++body.style.fontSize=x.value;+++++}+}|offset|length|style|CODE^0|0|0|OE^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@$E|K|F|L|G|H]]|A|@]|B|$]]]]

The problem with <code>&lt;select&gt;</code> 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, but <code>onchange="changeFontSize(this)"</code> 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.

<pre><code>&lt;label&gt;Font Size&lt;/label&gt;
&lt;select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)"&gt; 
 &lt;option value="small"&gt;Small&lt;/option&gt;
 &lt;option value="medium"&gt;Medium&lt;/option&gt;
 &lt;option value="large"&gt;Large&lt;/option&gt;
 &lt;option value="extraLarge"&gt;Extra large&lt;/option&gt;
&lt;/select&gt;

&lt;script&gt;
function changeFontSize(x){
 body=document.getElementById('body');
 if (x.value=="extraLarge") {
 body.style.fontSize="25px";
 } else {
 body.style.fontSize=x.value;
 }
}
&lt;/script&gt;
</code></pre>

entityMap|blocks|key|ic3p|text|我只需将第一个select选项的值设为默认值，并使用HTML5的新“隐藏”功能将该值隐藏在下拉列表中。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|f21j0|Select+An+Option
+++++One
+++++Two
+++++Three
+++++Four|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

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:

<pre><code> &lt;select name="" id=""&gt;
 &lt;option hidden value="default"&gt;Select An Option&lt;/option&gt;
 &lt;option value="1"&gt;One&lt;/option&gt;
 &lt;option value="2"&gt;Two&lt;/option&gt;
 &lt;option value="3"&gt;Three&lt;/option&gt;
 &lt;option value="4"&gt;Four&lt;/option&gt;
 &lt;/select&gt;
</code></pre>

entityMap|blocks|key|4g70a|text|你只需要把属性"selected“放在一个特定的选项上，而不是直接指向select元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7ejvq|下面是具有不同值的相同和多个工作示例的代码片段。|mho6|​|co2m1|Select+Option+3+:-+
+++
++++1
++++2
++++3
++++4
++++5
+++
+++
+++

+++

+++

+++Select+Option+5+:-+
+++
++++1
++++2
++++3
++++4
++++5
+++
+++
++++

+++

+++

+++Select+Option+2+:-+
+++
++++1
++++2
++++3
++++4
++++5|code-block|syntax|javascript|9c4th^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|O|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|P|9|@]|A|@]|B|$J|K]]|$2|L|4|F|6|7|8|Q|9|@]|A|@]|B|$]]]]

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.

<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> Select Option 3 :- 
 &lt;select name="hall" id="hall"&gt;
 &lt;option&gt;1&lt;/option&gt;
 &lt;option&gt;2&lt;/option&gt;
 &lt;option selected="selected"&gt;3&lt;/option&gt;
 &lt;option&gt;4&lt;/option&gt;
 &lt;option&gt;5&lt;/option&gt;
 &lt;/select&gt;
 
 &lt;br/&gt;
 &lt;br/&gt;
 &lt;br/&gt;
 Select Option 5 :- 
 &lt;select name="hall" id="hall"&gt;
 &lt;option&gt;1&lt;/option&gt;
 &lt;option&gt;2&lt;/option&gt;
 &lt;option&gt;3&lt;/option&gt;
 &lt;option&gt;4&lt;/option&gt;
 &lt;option selected="selected"&gt;5&lt;/option&gt;
 &lt;/select&gt;
 
 &lt;br/&gt;
 &lt;br/&gt;
 &lt;br/&gt;
 Select Option 2 :- 
 &lt;select name="hall" id="hall"&gt;
 &lt;option&gt;1&lt;/option&gt;
 &lt;option selected="selected"&gt;2&lt;/option&gt;
 &lt;option&gt;3&lt;/option&gt;
 &lt;option&gt;4&lt;/option&gt;
 &lt;option&gt;5&lt;/option&gt;
 &lt;/select&gt;</code></pre>
</div>
</div>

entityMap|blocks|key|5kcbc|text|在我看来，最好的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eb5gi|Choose+here
+++One
+++Two
+++Three
+++Four
+++Five|code-block|syntax|javascript|dk8e9|为什么不禁用？|arm5h|当您将disabled属性与一起使用时|9dh0c|Reset|offset|length|style|CODE|c870a|值不会重置为原始占位符。取而代之的是浏览器选择第一个未禁用的选项，这可能会导致用户错误。|chaog|默认空值|300qq|每个生产表单都有验证，那么空值应该不是问题。这样我们就可以有空的不需要的select。|3k600|XHTML语法属性|ah08g|selected="selected"|fv5ka|语法是兼容XHTML和HTML5的唯一方法。它是正确的XML语法，一些编辑器可能会对此感到高兴。它更具向后兼容性。如果XML遵从性很重要，那么您应该遵循完整的语法。^0|0|0|0|0|0|5|0|0|0|0|0|0|J|0^^$0|$]|1|@$2|3|4|5|6|7|8|13|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|14|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|15|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|16|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|17|9|@$N|18|O|19|P|Q]]|A|@]|B|$]]|$2|R|4|S|6|7|8|1A|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1B|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|1C|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|1D|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|1E|9|@$N|1F|O|1G|P|Q]]|A|@]|B|$]]|$2|11|4|12|6|7|8|1H|9|@]|A|@]|B|$]]]]

Best way in my opinion:
<pre class="lang-html prettyprint-override"><code>&lt;select&gt;
 &lt;option value=&quot;&quot; selected=&quot;selected&quot; hidden=&quot;hidden&quot;&gt;Choose here&lt;/option&gt;
 &lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
 &lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
 &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
 &lt;option value=&quot;4&quot;&gt;Four&lt;/option&gt;
 &lt;option value=&quot;5&quot;&gt;Five&lt;/option&gt;
&lt;/select&gt;
</code></pre>
Why not disabled?
When you use disabled attribute together with <code>&lt;button type=&quot;reset&quot;&gt;Reset&lt;/button&gt;</code> 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
<code>selected=&quot;selected&quot;</code> 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.

entityMap|blocks|key|8thc2|text|我使用Angular，并将默认选项设置为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|25r4h|HTML模板|2ln3r|test1
++++++++test2|code-block|syntax|javascript|200g4|脚本：|5u3dq|sselectedVal:any="test1";|offset|length|style|CODE^0|0|0|0|0|0|P^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|S|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|T|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|U|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|V|9|@$N|W|O|X|P|Q]]|A|@]|B|$]]]]

I use Angular and i set the default option by

HTML Template

<pre><code>&lt;select #selectConnection [(ngModel)]="selectedVal" class="form-control col-sm-6 " max-width="100px" title="Select" 
 data-size="10"&gt; 
 &lt;option &gt;test1&lt;/option&gt;
 &lt;option &gt;test2&lt;/option&gt; 
 &lt;/select&gt;
</code></pre>

Script:

<pre><code>sselectedVal:any="test1";
</code></pre>

entityMap|blocks|key|baq1d|text|你可以像这样试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9m403|1
++++++2
++++++3
++++++4
++++++5|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

You can try like this

<pre><code> &lt;select name="hall" id="hall"&gt;
 &lt;option&gt;1&lt;/option&gt;
 &lt;option&gt;2&lt;/option&gt;
 &lt;option selected="selected"&gt;3&lt;/option&gt;
 &lt;option&gt;4&lt;/option&gt;
 &lt;option&gt;5&lt;/option&gt;
 &lt;/select&gt;
</code></pre>

entityMap|blocks|key|47t8b|text|HTML代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eqo64|Pubblica
++++
++++
++++++++Utenti
++++
++++
++++++++Admin|code-block|syntax|javascript|86rf8|原生JavaScript代码片段：|a66f6|document.querySelectorAll('[data-selected]').forEach(e+=>+{
+++e.value+=+e.dataset.selected
});^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

HTML snippet:

<pre><code>&lt;select data-selected="public" class="form-control" name="role"&gt;
 &lt;option value="public"&gt;
 Pubblica
 &lt;/option&gt;
 &lt;option value="user"&gt;
 Utenti
 &lt;/option&gt;
 &lt;option value="admin"&gt;
 Admin
 &lt;/option&gt;
&lt;/select&gt;
</code></pre>

Native JavaScript snippet:

<pre><code>document.querySelectorAll('[data-selected]').forEach(e =&gt; {
 e.value = e.dataset.selected
});
</code></pre>

entityMap|blocks|key|dm030|text|设置selected="selected“，其中选项值为3|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ej5lu|请看下面的例子|cd94o|3|offset|length|style|CODE^0|0|0|0|1^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|L|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|M|9|@$G|N|H|O|I|J]]|A|@]|B|$]]]]

Set selected="selected" where is option value is 3

please see below example

<pre><code>&lt;option selected="selected" value="3" &gt;3&lt;/option&gt;
</code></pre>

entityMap|blocks|key|cu8n8|text|Upstream+System:

SYBASE+ASE
SYBASE_IQ
SQLSERVER


var+obj=document.getElementById("upstream");
for+(var+i=0;i|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript^0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$C|D]]]]

<pre><code>Upstream System:
&lt;select name=upstream id=upstream&gt;
&lt;option value="SYBASE"&gt;SYBASE ASE
&lt;option value="SYBASE_IQ"&gt;SYBASE_IQ
&lt;option value="SQLSERVER"&gt;SQLSERVER
&lt;/select&gt;
&lt;script&gt;
var obj=document.getElementById("upstream");
for (var i=0;i&lt;obj.length;i++){if(obj.options[i].value==="SYBASE_IQ")obj.selectedIndex=i;}
&lt;/script&gt;
</code></pre>

entityMap|blocks|key|69am|text|要使用PHP和JavaScript设置默认值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|cusb2|State:+

Andhra+Pradesh
Andaman+and+Nicobar+Islands
.
.
West+Bengal


document.getElementById("State").querySelector('option[value="{$_GET['State']}"]').selected+=+true;

heredoc;
}
?>|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

To set the default using PHP and JavaScript:
<pre><code>State: &lt;select id=&quot;State&quot;&gt;
&lt;option value=&quot;&quot; selected disabled hidden&gt;&lt;/option&gt;
&lt;option value=&quot;Andhra Pradesh&quot;&gt;Andhra Pradesh&lt;/option&gt;
&lt;option value=&quot;Andaman and Nicobar Islands&quot;&gt;Andaman and Nicobar Islands&lt;/option&gt;
.
.
&lt;option value=&quot;West Bengal&quot;&gt;West Bengal&lt;/option&gt;
&lt;/select&gt;
&lt;?php
if(isset($_GET['State'])){
 echo &lt;&lt;&lt;heredoc
&lt;script&gt;
document.getElementById(&quot;State&quot;).querySelector('option[value=&quot;{$_GET['State']}&quot;]').selected = true;
&lt;/script&gt;
heredoc;
}
?&gt;
</code></pre>

entityMap|blocks|key|eapi4|text|默认选择的值为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|586t7|选项-4|2hre6|Select
++++++++++++Option-1
++++++++++++Option-2
++++++++++++Option-3
++++++++++++Option-4
++++++++++++Option-5|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

Default selected value is Option-4
<pre><code> &lt;html:select property=&quot;status&quot; value=&quot;OPTION_4&quot; styleClass=&quot;form-control&quot;&gt;
 &lt;html:option value=&quot;&quot;&gt;Select&lt;/html:option&gt;
 &lt;html:option value=&quot;OPTION_1&quot; &gt;Option-1&lt;/html:option&gt;
 &lt;html:option value=&quot;OPTION_2&quot; &gt;Option-2&lt;/html:option&gt;
 &lt;html:option value=&quot;OPTION_3&quot; &gt;Option-3&lt;/html:option&gt;
 &lt;html:option value=&quot;OPTION_4&quot; &gt;Option-4&lt;/html:option&gt;
 &lt;html:option value=&quot;OPTION_5&quot; &gt;Option-5&lt;/html:option&gt; 
 &lt;/html:select&gt;
</code></pre>

I thought that adding a <code>"value"</code> attribute set on the <code>&lt;select&gt;</code> element below would cause the <code>&lt;option&gt;</code> containing my provided <code>"value"</code> to be selected by default:

<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="hall" id="hall" value="3"&gt;
 &lt;option&gt;1&lt;/option&gt;
 &lt;option&gt;2&lt;/option&gt;
 &lt;option&gt;3&lt;/option&gt;
 &lt;option&gt;4&lt;/option&gt;
 &lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>


However, this did not work as I had expected. How can I set which <code>&lt;option&gt;</code> element is selected by default?

How can I set the default value for an HTML <select> element?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我认为添加一个 "value" 属性集 element below would cause the  containing my provided "value" to be selected by default:12345 ​ 然而，这并没有像我预期的那样工作。如何设置默认选择哪个元素？

问如何设置超文本标记语言<select>元素的默认值？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置超文本标记语言<select>元素的默认值？EN