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

Question

我认为"value"在<select>下面的元素上添加属性集会导致默认选择<option>包含my provided "value":

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

但是,这并没有像我预期的那样奏效.如何设置<option>默认选择的元素？

Answer 1

设置selected="selected"为您想要的默认选项.

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

Answer 2

如果您希望将默认文本作为一种占位符/提示但不被视为有效值(例如"完成此处","选择您的国家"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>

Answer 3

完整的例子:

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

Answer 4

我遇到了这个问题,但是接受和高度赞同的答案对我来说并不适用.事实证明,如果您使用React,那么设置selected不起作用.

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

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

在React页面上阅读更多有关原因的信息.

Answer 5

你可以这样做:

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

在选项标记内提供"selected"关键字,您希望在下拉列表中默认显示该关键字.

或者您也可以为选项标签提供属性,即

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

Answer 6

如果你想使用Form中的值并保持动态,请尝试使用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>

Answer 7

我更喜欢这个:

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

选择选项后,"选择此处"将消失.

Answer 8

对大雄的回答有所改进.您还可以通过隐藏"选择此处"元素来改进下拉列表的可视化视图.

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

Answer 9

另一个例子; 使用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);

Answer 10

我认为最好的方法是：

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

为什么不禁用？

当您将Disabled属性与<button type="reset">Reset</button>value 一起使用时，不会重置为原始占位符。而是浏览器选择第一个未禁用选项，这可能会导致用户错误。

默认空值

每个生产表单都有验证，那么空值应该不是问题。这样我们可能有不需要的空选择。

XHTML语法属性

selected="selected"语法是与XHTML和HTML 5兼容的唯一方法。这是正确的XML语法，一些编辑者对此可能感到满意。它向后兼容。我对此没有强烈的感觉，但是如果您需要以上提到的参数，则应遵循完整的语法。

Answer 11

所述选定的属性是一个布尔属性.

如果存在,它指定在页面加载时应预先选择一个选项.

预选选项将首先显示在下拉列表中.

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

Answer 12

如果你有反应,你可以使用defaultValueas属性而不是valueselect标签.

Answer 13

如果使用的是带有角度1的select，则需要使用ng-init，否则，将不会选择第二个选项，因为ng-model会覆盖默认值

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

Answer 14

我只是简单地将第一个选择选项值设为默认值，然后使用 HTML5 的新“隐藏”功能在下拉列表中隐藏该值。像这样：

   <select name="" id="">
     <option hidden value="default">Select An Option</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
     <option value="4">Four</option>
   </select>