关于使用jQuery设置HTML选择选项的问题

Issue on Setting HTML Select Option Using jQuery

本文关键字：选项 问题 选择 HTML 于使用 jQuery 设置      更新时间：2023-09-26

我试图在这个演示中动态更改列表选项中的所选项目，但它不起作用。

<select id="selItems" class="selectpicker">
    <option>Select From List</option>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<p>
<button id="setdefault" type="submit" class="btn">Set Default</button>
<script>
 $("#setdefault").on("click", function () {
   $("#selItems option:eq(2)").attr("selected", "selected");
 });
</script>

你能告诉我我做错了什么吗？

尝试使用prop而不是attr:

 $("#setdefault").on("click", function () {
   $("#selItems option:eq(2)").prop("selected", true);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selItems" class="selectpicker">
    <option>Select From List</option>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<p>
<button id="setdefault" type="submit" class="btn">Set Default</button>

Bootstrap Select有一个实现这一点的方法。您不应该手动操作属性，因为页面中显示的元素无论如何都不是原始的select元素。

$("#setdefault").on("click", function () {
    $("#selItems").selectpicker('val', 'Ketchup');
});

演示

http://silviomoreto.github.io/bootstrap-select/#methods

您的代码不能按预期工作有几个原因。

您正在选择元素上设置点击事件，而不是在"设置默认值"按钮上。

您实际的select元素在页面上不可见，因为它正被您正在使用的jquery插件所替换。。因此，即使您设置了select的selected属性，您也不会在页面上看到它。

您应该参考该插件的文档来了解它是如何使用的。

尝试切换

$("#setdefault").on("click",function(){
 $("#selItems option:eq(3)").attr("selected", "selected");
});

至

$("#setdefault").on("click",function(){
 $("#setdefault option:eq(3)").attr("selected", "selected");
});

只需使用val():

$("#setdefault").on("click", function() {
  $("#selItems").val("Mustard");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selItems" class="selectpicker">
  <option>Select From List</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
<p>
<button id="setdefault" type="submit" class="btn">Set Default</button>

相关文章：