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

时间：2010-08-19 01:10:51

标签： html html-select

我认为在下面的"value"元素中添加<select>属性集会导致默认情况下选择包含我提供的<option>的{​​{1}}：

"value"

然而，这并没有像我预期的那样奏效。如何设置默认选择的<select name="hall" id="hall" value="3"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>元素？

31 个答案:

答案 0 :(得分：1877)

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

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

答案 1 :(得分：451)

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

答案 2 :(得分：219)

完整示例：

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

答案 3 :(得分：72)

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

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

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

详细了解原因here on the React page。

答案 4 :(得分：66)

你可以这样做：

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

答案 5 :(得分：48)

如果你想使用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>

答案 6 :(得分：36)

我更喜欢这个：

<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>
选择选项后，

'选择此处'消失。

答案 7 :(得分：28)

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>

答案 8 :(得分：17)

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

答案 9 :(得分：13)

选中的属性是布尔属性。

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

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

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

答案 10 :(得分：7)

如果您有反应，可以在select标记中使用defaultValue作为属性而不是value。

答案 11 :(得分：5)

如果您使用带角度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>

答案 12 :(得分：4)

此代码使用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>

答案 13 :(得分：4)

我使用这个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>

如果每次加载页面时都从_POST变量创建$ endmin（并且此代码位于发布的表单中），则默认情况下会选择先前选择的值。

答案 14 :(得分：4)

标签的value属性缺失，因此它不会显示为所需的选择。默认情况下，第一个选项显示在下拉页面加载，如果在标签上设置了value属性....我以这种方式解决了我的问题

答案 15 :(得分：3)

您可以使用：

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

代替，

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

两者都同样正确。

答案 16 :(得分：3)

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

答案 17 :(得分：3)

我认为最好的方法：

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

为什么不被禁用？

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

默认空值

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

XHTML语法属性

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

答案 18 :(得分：2)

我自己用它

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

答案 19 :(得分：2)

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

请参见下面的示例

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

答案 20 :(得分：1)

我使用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";

答案 21 :(得分：1)

您需要在每个选项中都有一个“id”属性才能使此解决方案起作用：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
}

#root {
  height: 100vh;
}

.gameBoard {
  border: 1px solid #e0e0e0;
  box-shadow: 2px 3px 5px #e0e0e0;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  background: rgba(0, 0, 0, 0.5);
}

函数首先尝试找到带有id的select>，然后在select>中搜索value_selected选项，如果找到它，它将设置 selected 属性返回 true。否则为假

答案 22 :(得分：1)

默认选择的值为 Option-4

  <html:select property="status" value="OPTION_4" styleClass="form-control">
            <html:option value="">Select</html:option>
            <html:option value="OPTION_1"  >Option-1</html:option>
            <html:option value="OPTION_2"  >Option-2</html:option>
            <html:option value="OPTION_3"  >Option-3</html:option>
            <html:option value="OPTION_4"  >Option-4</html:option>
            <html:option value="OPTION_5"  >Option-5</html:option>                                  
   </html:select>

答案 23 :(得分：1)

<select>的问题在于，有时它会与当前呈现的状态断开连接，除非选项列表中发生了更改，否则不会返回更改值。尝试从列表中选择第一个选项时可能会出现问题。以下代码可以使首次选择的第一选项有效，但是onchange="changeFontSize(this)"本身不会。上面介绍了一些方法，这些方法使用虚拟选项来强制用户进行更改以获取实际的第一个值，例如以空值开始列表。注意：onclick会调用该函数两次，以下代码不会，但是可以解决第一次出现的问题。

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

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

答案 24 :(得分：0)

HTML片段：

<select data-selected="public" class="form-control" name="role">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>

原生JavaScript代码段：

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});

答案 25 :(得分：0)

您可以尝试这样

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

答案 26 :(得分：0)

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

答案 27 :(得分：0)

要使用PHP和JavaScript设置默认值，请执行以下操作：

State: <select id="State">
<option value="" selected disabled hidden></option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
.
.
<option value="West Bengal">West Bengal</option>
</select>
<?php
if(isset($_GET['State'])){
    echo <<<heredoc
<script>
document.getElementById("State").querySelector('option[value="{$_GET['State']}"]').selected = true;
</script>
heredoc;
}
?>

答案 28 :(得分：0)

我就这样做了...... 

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

答案 29 :(得分：0)

这是选择默认选项的简单方法。

可用于在 HTML 页面上多次选择。

方法：

  • 查找每个选择
  • 读取该选择的 id 和值
  • 选中该选项

注意：

  • 每个选择都必须有 ID 以避免冲突

$(document).ready(function() {
  // Loop for every select in page
  $('select').each(function(index, id) {
    // Get the value 
    var theValue = $(this).attr('value');

    // Get the ID  
    var theID = $(this).attr('id');

    // Make option selected 
    $('select#' + theID + ' option[value=' + theValue + ']').attr('selected', true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<select id="sport" name="sport" class="autoselect" value="golf">
<option value="basket">Basket Ball</option>
<option value="tennis">Tennis</option>
<option value="golf">Golf</option>
<option value="bowling">Bowling</option>
</select>

<hr>

<select id="tools" name="tools" class="autoselect" value="saw">
<option value="hammer">Hammer</option>
<option value="drill">Drill</option>
<option value="screwdriver">Screwdriver</option>
<option value="saw">Saw</option>
<option value="wrench">Wrench</option>
</select>

答案 30 :(得分：0)

我遇到了一些麻烦，因为我需要某种方式根据数据库中的值动态选择选项。下面的脚本对我来说就像一个魅力：

<?php
//pick the value of database
$selected_sexo = $query['s_sexo'];
?>

<select name="s_sexo" id="s_sexo" required>
  <option <?php if($selected_sexo == 'M'){echo("selected");}?> value="M">M</option>
  <option <?php if($selected_sexo == 'F'){echo("selected");}?> value="F">F</option>
</select>
相关问题
最新问题