使用jQuery按值选择下拉选项

Select dropdown option by value using jQuery

本文关键字：选项 选择 jQuery 使用      更新时间：2023-09-26

我选择了以下html结构

<select id="mainMenu" data-mini="true" name="select-choice-min">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>   
</select>

在页面加载时，我想初始设置选项值为5，所以我尝试了(但没有改变)

$(document).ready(function () {
   $('#mainMenu option').eq(5).prop('selected', true);
})

我使用jQuery 1.8.3和jQuery移动，因为这是移动网站

<script src="/Scripts/jquery-1.8.3.js"></script>
<script src="/Scripts/jquery.mobile-1.4.2.js"></script>

更新:

我刚刚意识到，从发布的答案的每一个代码工作(以及我的)，#mainMenu选项值被设置为所需的值(5)，但它的文本没有改变(在任何这种情况下)。这是正常的吗，有解决办法吗?

我试过$("mainMenu").text("5");

刷新

这用于更新自定义选择以反映本机选择元素的值。如果选择中的选项数量不同而不是自定义菜单中的项目数量，它将重建自定义菜单。此外，如果传递一个true参数，则可以强制重建发生。

$("#mainMenu").val("5");
$("#mainMenu").selectmenu('refresh', true);

看这里选择菜单

小提琴

运行正常:

$(document).ready(function () {
   $('#mainMenu option').eq(5).prop('selected', true);
})

检查JSFiddle Demo

但是.eq(5)是索引并且从0开始，所以如果你想选择value=5，使用.eq(4)。

也可以这样写:

$("#mainMenu").val("5");

，也可以在HTML代码中手动设置5为默认选择值，如下所示:

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

使用jquery =>

$(document).ready(function () {
   $('#mainMenu').val("5");
})

应该可以了

$(document).ready(function () {
    var dropdown = $('#mainMenu');
        dropdown.val(5);
        dropdown.change();
});

另一种方式是:

$(function () {
   $('#mainMenu').find("option[value='5']").each(function(){
       if ($(this).val() == 5) {
          $(this).prop("selected", true);
          $('#mainMenu').trigger("updated");
          $('#mainMenu').val(5).trigger("change");
        }
    });
});

这段代码对我有效。例如，如果你在HTML中有国家列表:

<select id="countries" name="countries">
    <option value="0">Argentina</option>
    <option value="1">Brazil</option>
    <option value="2">England</option>
    <option value="3">Ireland</option>
    <option value="4">United States</option>
</select>

在JQuery中你可以这样选择英格兰:

$('#countries').val("2");

Demo Link - jsfield

相关文章：