标记上的值属性<select>未选择默认选项



也许我误解了这里,但鉴于以下html:

<select value="2">
    <option value="1">Something</option>
    <option value="2">Something else</option>
</select>

我希望"Something else"是默认选择的选项。然而,事实似乎并非如此。为什么会这样,我应该做些什么改变?

option元素上使用selected属性来指定默认选项。

<select>
    <option value="1">Something</option>
    <option value="2" selected="selected">Something else</option> // this is default
</select>

select元素没有value属性

设置默认选项的唯一方法是在option标签中添加selected。

<SELECT>
<OPTION>Something
<OPTION SELECTED>Something Else

React JS

一些编码实现,如ReactJS允许你使用value属性和<select>标签,所以这将是完全有效的代码:

<select value="2">
    <option value="1">Something</option>
    <option value="2">Something else</option>
</select>

所以如果你看到这样的代码示例,很可能是因为它是在React或其他类似的库/框架中。

当然,使用这种方法,通常您会想要指定状态中的值,以便它是可更新的。

HTML与属性最小化:

然而,如果你使用纯HTML,你必须在<option>标签中使用selected属性,如下所示:

<select>
    <option value="1">Something</option>
    <option value="2" selected>Something else</option>
</select>

HTML with Full Attribute Specification:

上面使用了属性最小化,但是如果你愿意,你也可以指定完整的形式:

<select>
    <option value="1">Something</option>
    <option value="2" selected="selected">Something else</option>
</select>

<select>元素没有value属性,因此会被忽略。所以,你有一个单一的选择<select>,它的<option>元素都没有selected属性,这意味着第一个<option>被作为默认选择。

我知道这篇文章很老了,但如果有人在这方面挣扎,你可以使用jquery实现你正在寻找的功能。

使用php的完整代码应该是这样的

PHP

if ($_SERVER['REQUEST_METHOD']== "POST") {
$thing = $_POST['things'];
} else {
$thing ="";
}

<select name='things' value="<?php echo $thing; ?>">
    <option value="1">Something</option>
    <option value="2">Something else</option>
</select>
JQUERY

$(function() {
    $("select[value]").each(function() {
        $(this).val(this.getAttribute("value"));
    });
}); //end document ready

这将允许用户选择的选项保持选中状态在页面通过post重新加载而不是返回之后

必须使用select attribute。在下面的代码中,默认情况下会选择一个swift选项

<select name="myCar" id="car">
            <option value="ind">Indica</option>
            <option value="swf" selected>Swift</option>
 </select>

最新更新