首页 文章

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

提问于
浏览 次
1114

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

<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

21 回答

  • 5

    我自己用它

    <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>
    回复于
  • 27

    您可以使用：

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

    代替，

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

    两者都同样正确 .

    回复于
  • 3

    这就是我做的...

    <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>
    回复于
  • 12

    完整的例子：

    <select name="hall" id="hall"> 
  <option> 
    1 
  </option> 
  <option> 
    2 
  </option> 
  <option selected> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </option> 
</select>
    回复于
  • 380

    您只需将属性“选中”放在特定选项上，而不是直接选择元素 .

    以下是具有不同值的相同和多个工作示例的代码段 .

    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>
   
   
    
   
    
   
    
   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>
   
    
    
   
    
   
    
   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>
    回复于
  • 47

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

    selected 属性是布尔属性 .

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

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

    <select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select>
    回复于
  • 3

    如果你想使用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>
    回复于
  • 0

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

    回复于
  • 16

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

    回复于
  • 33

    我只是简单地将第一个选择选项值设为默认值，然后使用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>
    回复于
  • 4

    我更喜欢这个：

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

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

    回复于
  • -1

    <select> 的问题是，当前正在呈现's sometimes disconnected with the state of what'，除非选项列表中的内容发生了变化，否则不会返回更改值 . 尝试从列表中选择第一个选项时，这可能是一个问题 . 下面的代码可以在第一次选择时获得第一个选项，但是 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>
    回复于
  • 208

    改进nobita 's answer. Also you can improve the visual view of the drop down list, by hiding the element '在这里选择' .

    <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>
    回复于
  • 59

    另一个例子;使用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);
    回复于
  • 3

    你可以这样做：

    <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>
    回复于
  • 1726

    此代码使用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>
    回复于
  • 0

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

    回复于
  • 2

    如果使用带角度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>
    回复于
  • 61

    我使用这个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（并且此代码位于发布的表单内），则默认情况下会选择先前选择的值 .

    回复于
  • 0

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

    <option selected="selected">
3
</option>
    回复于

相关问题