如何设置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>
