如何设置HTML＆lt; select＆gt;的默认值？


How can I set the default value for an HTML <select> element?

我认为在下面的并且不适合使用value属性for标记的value属性(即以下标记：

1
2
3
4
5
<select value="B">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

阅读更多关于为什么在网页上的反应。

相关讨论

你可以这样做：

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

在"选定的关键字提供的选项标签，你想在你的appear默认下拉列表。

或者你也可以选择提供了属性的标签。

1
<option selected="selected">3</option>
相关讨论

如果你要使用的值，以保持它的自由和尝试这个PHP动态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

这一优惠：

1
2
3
4
5
6
7
8
<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>

"选择这一选项后，disappears已选定。

相关讨论

一种改进的是大雄的答案。也可以提高可视化的视图下拉列表，通过隐藏的元素选择这里。

1
2
3
4
5
6
7
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>

另一个例子；使用JavaScript来设置选定的选项。

你可以使用这个例子值是一对线圈阵列对下拉组件)

1
2
3
4
5
6
7
8
9
10
11
// 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);
相关讨论

在选定的属性是一个布尔属性。

当这一选项时，它指明应选择当前页面的加载。

在预选第一选项将显示在下拉列表中。

1
2
3
4
5
6
<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option>
</select>

如果你是在你可以使用的属性defaultValue反应而value标签中选择。

如果你是选择和使用1角，然后你需要初始化使用)，否则将不被选择，第二选择的模型，由于覆盖的违约，给选定的值

1
2
3
4
5
<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>

该代码集选择，默认值为PHP的HTML元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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属性(标签丢失，所以它不是你所需的选择显示。默认选项的下拉列表的第一页显示在线的负载，如果属性值设置在标签。解决我的问题，我有这样的

我使用PHP的函数生成的，这是我的选择，和插入到HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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;
  }

?>

我在我的网页代码，然后使用它，在下面；

1
2
3
<select id="endmin" name="endmin">
  <?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>

如果是从_ endmin美元后创造的每一次页面加载的变量(这是一个在窗体的代码是以前选定的职位)，然后选定的值是默认的。

你可以使用：

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

而不是，

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

同样都是正确的。

最佳的方式在我的意见：

1
2
3
4
5
6
7
8
<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属性值是在一placeholder重置为原始。而不是浏览器选择第一选项，因为用户可能需要关闭的错误。

默认值为空

一个生产形式验证，然后空值不应该是一个问题。这种方式，我们需要确定选择可能有空。

XHTML的语法属性

selected="selected"语法是唯一的两个单向兼容XHTML和HTML 5。它是正确的XML语法和一些编辑对这可能是快乐的。它是更多的后向兼容。我没有关于这个强烈的感觉，但如果你是以上说法全是你应该遵循的语法要求。

我会让我们的第一选择就是选择默认值，值，只是隐藏在下拉与HTML5的新"隐藏"的特征。像这样：

1
2
3
4
5
6
7
   <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>

我自己使用它

1
2
3
4
5
6
7
8
9
<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>

的问题，是与它的