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

设置selected =“ selected”，其中选项值为3

请看下面的例子

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

你可以这样尝试

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

我使用Angular并通过设置默认选项

HTML模板

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

脚本：

sselectedVal:any="test1";

您只需要在特定选项上放置属性“ selected”，而不是直接选择元素。

这是具有不同值的相同和多个工作示例的摘录。

   Select Option 3 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option selected="selected">3</option>
    <option>4</option>
    <option>5</option>
   </select>
   
   <br/>
   <br/>
   <br/>
   Select Option 5 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option selected="selected">5</option>
   </select>
   
    <br/>
   <br/>
   <br/>
   Select Option 2 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>

我只是将第一个选择选项值设置为默认值，然后使用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>

此代码使用PHP设置HTML select元素的默认值。

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

标签的value属性缺失，因此不会如您所希望的那样显示。默认情况下，如果在标签上设置了value属性，则第一个选项在下拉页面加载时显示...。

您可以使用：

<option value="someValue" selected>Some Value</option>

代替，

<option value="someValue" selected = "selected">Some Value</option>

两者都是正确的。

另一个例子; 使用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>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select> 

对nobita答案的改进。您也可以通过隐藏元素“在此处选择”来改善下拉列表的视觉效果。

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

我认为最好的方法是：

<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语法，一些编辑者对此可能感到满意。它向后兼容。我对此没有强烈的感觉，但是如果您需要提及以上参数，则应遵循完整的语法。

如果您有反应，则可以将其defaultValue用作属性，而不是value在select标签中。

我更喜欢这样：

<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 name="hall" id="hall"> 
  <option> 
    1 
  </option> 
  <option> 
    2 
  </option> 
  <option selected> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </option> 
</select> 

您可以这样做：

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

设置selected="selected"要设为默认选项的选项。

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

如果您希望使用默认文本作为一种占位符/提示，但不认为是有效值（例如“在此完成”，“选择您的国家/地区”等），则可以执行以下操作：

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

我遇到了这个问题，但是被接受并被高度评价的答案对我来说不起作用。事实证明，如果您使用的是React，则设置selected无效。

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

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

在React页面上阅读有关为什么的更多信息。