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

我以为在下面的"<选择> "元素上添加一个"<价值" "属性设置，会使包含我提供的"<价值" "的 "选项> "被默认选中。

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

然而，这并没有像我预期的那样工作。我怎样才能设置哪个<选项>元素被默认选中？

Nemus
已编辑的问题 24日 一月 2019 в 6:50
编程
html html-select
19日 八月 2010 в 1:10
46 种观点
解决办法

为你想成为默认的选项设置selected="selected"。


3
Borealid
编辑本段答案31日 五月 2019 в 10:28
评论(15)

如果你想有一个默认的文本作为一种占位符/提示，但不被认为是一个有效的值（像"完成这里"，"选择你的国家&quot。 等），你可以做这样的事情。

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->


<select>
  Choose here
  One
  Two
  Three
  Four
  Five
Nobita
编辑本段答案17日 八月 2017 в 9:58
评论(7)

完整的例子。


<select name="hall" id="hall"> 

    1 


    2 


    3 


    4 


    5
评论(8)

我遇到了这个问题，但公认的、高分的答案对我来说并不起作用。 原来，如果你使用的是React，那么设置selected就不行了'。

相反，你必须直接在<select>标签中设置一个值，如下图所示。


<select value="B">
  Apple
  Banana
  Cranberry
评论(4)

你可以这样做。


<select name="hall" id="hall">
     1 
     2 
     3 
     4 
     5
评论(3)

如果你想使用表格中的值，并保持它的动态性，可以用php来试试




<?php
    $selected = $_POST['select'];
?>

<select name="select" size="1">

  >1
  >2
评论(0)

我更喜欢这个。


<select>
   Choose here
   One
   Two
   Three
   Four
   Five
评论(5)

对[nobita][1]'的回答的改进。 同时你也可以通过隐藏元素'Choose here'来改善下拉列表的视觉效果。

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->


<select>
  Choose here
  One
  Two
  Three
  Four
  Five
评论(0)

另一个例子。 使用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);
评论(2)

selected属性是一个布尔属性。

当它存在时，它指定了在页面加载时应该预选一个选项。

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


<select>
  Volvo
 Saab
 VW
 Audi
评论(0)

我认为是最好的方式。

<选择>
<选项值="&quot。
selected="selected"
hidden="hidden">在这里选择</option&gt。
<option value="1">一个</option&gt。
<option value="2">Two</option&gt。
<期权价值="3">Three</option&gt。
<期权价值="4">Four</option&gt。
<option value="5">Five</option&gt。
</select>

**为什么不禁用？

当你在使用禁用属性时，同时使用lt;button type="reset">Reset</button>值不会被重置到原来的占位符。 而不是浏览器先选择未被禁用的选项，这可能会导致用户错误。

默认为空值

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

XHTML语法属性

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

Michał Mielec
编辑本段答案16日 二月 2019 в 7:15
评论(0)

如果你是在react中，你可以在select标签中使用defaultValue作为属性来代替value。

评论(0)

如果你使用的是angular 1的select，那么你需要使用ng-init，否则，第二个选项将不会被选择，因为ng-model覆盖了默认的选择值。


<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
  Name
  Stars
  Language
评论(0)

这段代码在PHP中设置了HTML选择元素的默认值。


<select name="hall" id="hall">
<?php
    $default = 3;
    $nr = 1;
    while($nr < 10){
        if($nr == $default){
            echo "". $nr ."";
        }
        else{
            echo "". $nr ."";
        }
        $nr++;
    }
?>
Julian
编辑本段答案12日 四月 2018 в 7:34
评论(0)

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

然后在我的网页代码中，我用了如下的方法。


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

标签的值属性缺失，所以不能显示为你想要的选择。 标签的value属性缺失，所以它不会显示为你想要的选择。 如果在<option&gt.标签上设置了value属性，那么默认情况下，第一个选项会在下拉页面加载时显示。 标签上设置值属性.... 我的问题是这样解决的

评论(0)

我只需简单地将第一个选择选项的值设为默认值，然后用HTML5'新的"hidden&quot.功能将该值隐藏在下拉菜单中即可。 的功能来隐藏该值。 就像这样。


   <select name="" id="">
     Select An Option
     One
     Two
     Three
     Four
Ahmedakhtar11
编辑本段答案4日 九月 2018 в 8:08
评论(0)

你可以使用。

Some Value

而不是：

Some Value

两者同样正确。

评论(0)

我自己也在用


<select selected=''>

    ccc
    xxx
    zzz
    aaa
    qqq
    wwww
samayo
编辑本段答案2日 十月 2017 в 1:47
评论(0)

你只需要把属性"selected" 属性，而不是直接选择元素。

下面是相同和多个不同值的工作示例的代码段。

<！--开始片段。 js hide: false console.true babel: true true babel.false -->-- 开始片段: js hide: false console: true false -->


   Select Option 3 :- 
   <select name="hall" id="hall">
    1
    2
    3
    4
    5

    1
    2
    3
    4
    5

    1
    2
    3
    4
    5
评论(0)