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

问题描述 投票：1243回答：22

我认为在下面的"value"元素上添加一个<select>属性集会导致默认选择包含我提供的<option>的"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>元素？

html html-select
22个回答
1959
投票

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

<option selected="selected">
3
</option>
14
投票

selected属性是布尔属性。

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

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

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

我认为最好的方法：

<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>值时，不会将值重置为原始占位符。相反，浏览器选择第一个未禁用选项，这可能会导致用户错误。

默认空值

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

XHTML语法属性

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

8
投票

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

6
投票

如果您使用带角度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>
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（并且此代码位于发布的表单中），则默认情况下会选择先前选择的值。

4
投票

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

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>
3
投票

您可以使用：

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

代替，

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

两者都同样正确。

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>
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>
500
投票

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

您只需将属性“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>
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>
0
投票

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

完整的例子：

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

我遇到了这个问题，但是接受和高度赞同的答案对我来说并不适用。事实证明，如果你使用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的原因。

67
投票

你可以这样做：

<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>
49
投票

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

我更喜欢这个：

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

选择选项后，“选择此处”将消失。

29
投票

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>
18
投票

另一个例子;使用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);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.