Question

我有一个带有各种选项的选择框。

当页面加载时，应该使用jQuery预先选择一个带有值的选项，例如10。

我该怎么做？

Answer 1

当页面加载运行时（您可以将其放在<body onload="//put code here">中）：

$("option[value='10']").attr('selected','selected');

Answer 2

测试示例： http://jsfiddle.net/VArCZ/

$(document).ready(function() {

    $('#mySelectBox').val('10');

});

虽然如果初始值是静态的，则不需要jQuery：

<select id='mySelectBox'>
    <option value='5'>5</option>
    <option value='10' selected='selected'>10</option>
    <option value='15'>15</option>
</select>

Answer 3

以上代码正常运行，您可以使用以下代码：

$("option[value='10']").attr('selected','selected');

Answer 4

这是我在我的代码中重复使用的东西。希望它有所帮助。您可以启用控制台输出以查看发生的情况。使用此功能，您可以根据选项值或选项文本匹配所需选项，如下例所示。

Html：

<select id="languages">
 <option value="01">JAVA</option>
 <option value="02">HTML</option>
</select>

<select class="data-interchange">
 <option value="A">JSON</option>
 <option value="B">XML</option>
</select>

JavaScript（使用Jquery）

$(function() {
  preSelectDropDownList("#languages", "val", "02");
  preSelectDropDownList(".data-interchange", "text", "XML");

  function preSelectDropDownList(selector, checkAgaints, neddle) {
    //console.log(selector, checkAgaints, neddle);//DEBUG
    let hayStack = "";
    neddle = neddle == null ? "" : neddle;
    $(selector + " option").filter(function() {
        if (checkAgaints === "text") {
            hayStack = $(this).text();
        } else if (checkAgaints === "val") {
            hayStack = $(this).val();
        } else {
            alert("Error on Param 2.Only text or value allowed -->" + checkAgaints);
        }
        var result = hayStack.includes(neddle);
        //console.log(neddle+" vs "+hayStack+" = "+result);//DEBUG
        //console.log("Selected return", result);//DEBUG
        return result;
    }).prop('selected', true);
}
});

Answer 5

在最新的jQuery版本中，这对我有用：

$("option[value='10']").prop('selected',true);

如何使用jQuery在选择框中预选选项

5 个答案: