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


1454

我认为"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>默认选择的元素?


哇,这个问题是如此的帮助,它从字面上去病毒哈哈
finnmglas

Answers:


2149

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

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

19
<option value =“ 3” selected =“ selected”> 3 </ option>选择选项3时,该值将作为字符串传递。
Sree Rama

5
并继续对<Select>使用id属性,并且对<select> html元素使用value属性是不好的。
Sree Rama

214
=“ selected”部分不是必需的。只是<option selected>将按照其他答案中所述进行操作。
MindJuice 2014年

56
@MindJuice我写的是有效的多语言HTML / XML。对于浏览器,使用<option selected>可以,但是可能导致其他解析器拒绝该文档。我发现偶尔可以在Web文档上使用XPath / XSLT很方便。
Borealid 2014年

70
如果您使用的是Angular,请注意,它ng-model会覆盖默认的选定值(如果未设置绑定对象,即使未定义也是如此)。花了我一段时间才弄清楚为什么selected="selected"没有选择该选项。
metakermit

624

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

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


60
我想这就是大多数人想要的。好答案。
chrisallick '16

1
这是一个外部的jsfiddle,仅需要使CSS不在屏幕的边框上显示即可。几个月后,它被编辑为一个内联代码段,而编辑的人只是将其保留在示例中。如果确实困扰您,则可以对其进行编辑并将其从摘要中删除。
大雄

更好的解决方案是改为使用hidden属性。参见下面的@ chong-lip-phang的答案:stackoverflow.com/a/39358987/1192426
Ivan Akulov

<option value="" selected disabled hidden>Choose here</option>

1
很棒的答案!
japes Sophey

234

完整的例子:

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


11
这比使用selected =“ selected”简单。
罗德里戈2014年

57
selected =“ selected”应该适用于所有文档类型。XHTML不喜欢没有值的属性。
ps2goat

14
@Rodrigo真的很难写selected="selected"吗?我的意思是,您要节省什么?时间?尺寸?它可以忽略不计,并且如果使代码更“兼容”,为什么不这样做呢
xDaizu

15
@DanielParejoMuñoz,好的,可以忽略不计。但是,如果我的doctype是html,而不是xhtml,为什么还要浪费任何字节?
罗德里戈

5
selected =“ selected”看起来像一个错误。在几个月后,我可能会将其更改为selected =“ 3”,以为这意味着选择了项目3。(并中断我的页面)
Paul McCarthy

92

我遇到了这个问题,但是被人们接受并高度评价的答案对我没有用。事实证明,如果您使用的是React,则设置selected无效。

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

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

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


2
您可以使用标签的value属性<select>(即)在下拉列表中设置预选选项<select value="3">,但在W3C验证程序中无效。
使徒

4
是的,但这不是HTML,而是JSX,因此不需要遵循W3C规则。最后,React生成的HTML是有效的。
MindJuice 2015年

在理想世界中,这是对问题的评论,因为它不是有效的答案。但是我认为它具有足够的价值。
Justus Romijn

2
我需要与上述建议类似的解决方案,但使用JQuery代替React。万一将来对任何人有帮助:$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
CDK,

这个答案是无效的,潜在的问题是关于HTML,而不是React(JSX)。
亚伦C

72

您可以这样做:

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

13
需要明确说明的是,w3标准为<option selected =“ selected”> 3 </ option>
htmldrum 2012年

40
@JRM我认为您的意思是,如果要使文档符合XHTML,则属性必须具有a值。在HTML中,不需要“ selected = selected”。在这些例子w3.org/wiki/HTML/Elements/selectdeveloper.mozilla.org/en-US/docs/HTML/Element/select不指定值。要注意的重要一点是,selected="false"不允许这样做,selected=""也要使其选中。使选项未被选中的唯一方法是删除属性。w3.org/html/wg/drafts/html/master/…–
Juan Mendes

3
我永远也不会理解这样的问题。他们确实像是正确的答案。.2年后,大声笑
Phil

51

如果您想使用表单中的值并保持动态,请尝试使用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>

40

我更喜欢这样:

<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
我尝试了此操作,但未显示“在这里选择”。第一个选项是空的
波格丹配合

你使用的是什么浏览器?
Chong Lip Phang

我使用的是Google Chrome浏览器版本52.0.2743.116 m
Bogdan Mates

2
我也在使用该浏览器,没有遇到任何问题。
Chong Lip Phang

2
考虑添加value=""以确保获得空值。
瑞安·沃尔顿

31

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>


25

我认为最好的方法是:

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


这对我来说是全部选择
ADEL NAMANI

@ADELNAMANI您能否提供代码链接?我想您的问题与我的答案无关。
米哈尔Mielec的

19

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

那不应该el.selected = "selected";符合w3标准吗?
7yl4r 2014年

5
@ 7yl4r号selected是由W3C所定义的布尔属性- w3.org/TR/html401/interact/forms.html `17.6.1预选选项中选择[CI] -当设置时,这个布尔属性指定了该选项有关使用的更多信息,请参见w3c学校-w3schools.com/jsref/prop_option_selected.asp
Ally

14

选择属性是一个布尔属性。

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

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

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

10

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


7

如果使用的是带有角度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>

2

您只需要在特定选项上放置属性“ 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>


2

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

请看下面的例子

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

在Firefox上,它将无法在页面重新加载时使用
Sebastian

在我的系统上,它是在firefox上工作的
Akbor

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

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

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>

4
这种解决方案似乎有些不一致。如果元素的名称为“ select”,那么$ _POST变量键是否应该为“ select”-“ drop_down”来自何处?同样,假设这是一个错误,并且实际上是在检查$ _POST ['select']变量中的值,则任何非空值都将返回true,因此所有<option>项目都将标记为“ selected”。也许我缺少这个答案必不可少的东西?
瑞安

0

你可以这样尝试

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

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
});

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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.