如何设置HTML <select>元素的默认值?

我认为在下面的<select>元素上添加一个"value"属性会导致包含我提供的"value"<option>被默认选中:

 <select name="hall" id="hall" value="3"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 

然而,这并没有像我预料的那样工作。 我如何设置默认select哪个<option>元素?

设置selected="selected"作为默认选项。

 <option selected="selected"> 3 </option> 

完整的例子:

 <select name="hall" id="hall"> <option> 1 </option> <option> 2 </option> <option selected> 3 </option> <option> 4 </option> <option> 5 </option> </select> 

如果你想有一个默认的文本作为一种占位符/提示,但不被认为是一个有效的值(如“完成这里”,“select你的国家”ecc。),你可以做这样的事情:

 <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> 

你可以这样做:

 <select name="hall" id="hall"> <option> 1 </option> <option> 2 </option> <option selected> 3 </option> <option> 4 </option> <option> 5 </option> </select> 

在选项标签内提供“选定”关键字,您希望默认显示在您的下拉列表中。

或者你也可以提供属性的选项标签即

 <option selected="selected">3</option> 

我遇到了这个问题,但接受和高度回应的答案不适合我。 事实certificate,如果你正在使用React,那么设置selected不起作用。

相反,您必须直接在<select>标签中设置一个值,如下所示:

 <select value="B"> <option value="A">Apple</option> <option value="B">Banana</option> <option value="C">Cranberry</option> </select> 

在React页面阅读更多关于为什么在这里 。

如果你想使用表格的值,并保持dynamic尝试这与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> 

我更喜欢这个:

 <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> 

select选项后,“select此处”消失。

大雄回答的改进。 您也可以通过隐藏“select此处”元素来改善下拉列表的视觉效果。

 <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> 

另一个例子; 使用JavaScript设置选定的选项。

(你可以使用这个例子来将一个值数组循环到一个下拉组件中)

<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); 

所选属性是布尔属性。

如果存在,则指定在页面加载时应该预先select一个选项。

预先select的选项将首先显示在下拉列表中。

 <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="vw">VW</option> <option value="audi" selected>Audi</option> </select> 

我使用这个PHP函数来生成选项,并将其插入到我的HTML

 <?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 <= $end; $i = $i + $step) { $retstring = $retstring . '<OPTION '; $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"'; if($default == $i) { $retstring = $retstring . ' selected="selected"'; } $retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> '; } return $retstring; } ?> 

然后在我的网页代码中,我使用它如下;

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

如果$ endmin是每次加载页面时从一个_POSTvariables创build的(并且这个代码位于一个表单中),那么默认情况下会select之前select的值。

我添加了代码来为PHPselectHTMLselect元素的默认值。 这通过给var默认值select默认值。

 <?php echo "<h1>Example with php</h1><br>"; ?> <select name="hall" id="hall"> <?php $default = 3; $nr = 1; while($nr < 10){ if($nr == $default){ echo "<option selected=\"selected\">". $nr ."</option>"; } else{ echo "<option>". $nr ."</option>"; } $nr++; } ?> </select> 

标签的值属性丢失,所以它不会显示为你想要的select。 默认情况下,第一个选项显示在下拉页面加载,如果value属性设置在标签….我解决了我的问题这种方式

我自己用它

 <select selected=''> <option value=''></option> <option value='1'>ccc</option> <option value='2'>xxx</option> <option value='3'>zzz</option> <option value='4'>aaa</option> <option value='5'>qqq</option> <option value='6'>wwww</option> </select> 

如果你正在使用angular度为1的select,那么你需要使用ng-init,否则,第二个选项将不会被选中,因为ng-model覆盖了默认select的值

 <select ng-model="sortVar" ng-init='sortVar="stargazers_count"'> <option value="name">Name</option> <option selected="selected" value="stargazers_count">Stars</option> <option value="language">Language</option> </select> 

我就是这么做的

 <form action="../<SamePage>/" method="post"> <?php if ( $_POST['drop_down'] == "") { $selected = ""; } else { $selected = "selected"; } ?> <select name="select" size="1"> <option value="1" <?php $selected ?>>One</option> //////// OR //////// <option value="2" $selected>Two</option> </select> </form>