<select> 标签上的 value 属性未选择默认选项答案

【问题标题】：value attribute on <select> tag not selecting default option<select> 标签上的 value 属性未选择默认选项
【发布时间】：2021-04-02 00:37:25
【问题描述】：

也许我在这里误解了，但给出了以下 html：

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

我希望“其他”是默认选择的选项。但是，似乎并非如此。为什么会这样，我应该做些什么不同的事情？

【问题讨论】：

标签： html

【解决方案1】：

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

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

【讨论】：

人力资源部。然后我必须使用 javascript 设置默认值，mustache 模板似乎不允许在模板中进行相等性测试......无论如何，谢谢你的回答！
@crazy2be 你能分享你用来做这个的javascript代码吗？
@nanospeck：不幸的是，我不再有确切的代码。我想我也可能在 mustache 模板中使用了类似github.com/crazy2be/wfdr-example/blob/master/shared/tmpl/base/… 之类的技巧（即在映射或结构中定义每个可能的值并检查是否存在，而不是进行比较）。

【解决方案2】：

拥有默认选项的唯一方法是在选项标签中选择。

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

【讨论】：

【解决方案3】：

反应 JS

ReactJS 等一些编码实现允许您使用带有<select> 标签的value 属性，因此这将是完全有效的代码：

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

因此，如果您看到这样的代码示例，很可能是因为它位于 React 或其他类似的库/框架中。

当然，使用这种方法，通常您会希望在 state 中指定值，以便它可以更新。

带有属性最小化的 HTML：

但是，如果您使用纯 HTML，则必须在 <option> 标记中使用 selected 属性，如下所示：

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

具有完整属性规范的 HTML：

上面使用了属性最小化，但你也可以根据需要指定完整的形式：

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

【讨论】：

嗨，我可以知道
@AKJ 您选择标签中的value 基本上只是设置默认选项。从动态的角度来看，它使事情变得更容易，因为如果您想要显示选定的特定选项，通常，您必须遍历每个选项并找到您想要的值，然后添加 selected 属性。使用 React JS 和其他一些实现，您需要做的就是更新 select 标签的 value 属性，它会为您完成这一切。
如果值为 null 那么默认值是多少？最上面的选项？
@AKJ 我不确定，您必须对其进行测试才能确定。由 React 决定如何生成代码，而浏览器则知道如何处理生成的代码。
@AKJ，看看这个帖子：stackoverflow.com/questions/36187522/…

【解决方案4】：

<select> 元素没有value 属性，因此被忽略。因此，您只有一个选择 <select> 并且它的 <option> 元素都没有 selected 属性，这意味着第一个 <option> 被视为默认选择。

【讨论】：

【解决方案5】：

我知道这篇文章已经很老了，但如果其他人为此苦苦挣扎，您可以使用 jquery 实现您正在寻找的功能。

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

PHP

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

HTML

<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

这将允许用户选择的选择选项保持选中状态在页面通过帖子重新加载而不是返回之后到默认值。

【讨论】：

【解决方案6】：

你必须使用选择属性。在下面的代码中，默认情况下会选择一个 swift 选项

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

【讨论】：