Question

我正在尝试在This Demo动态更改列表选项中的所选项目，但它无效。

<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>

你可以告诉我我做错了吗？

Answer 1

Bootstrap Select有一个执行此操作的方法。您不应该手动操作属性，因为页面中看到的元素无论如何都不是原始的select元素。

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

Demo

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

Answer 2

有几个原因导致您的代码无法按预期运行。

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

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

您应该参考the documentation of that plugin来弄清楚它是如何使用的。

Answer 3

尝试使用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>

Answer 4

尝试切换

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

到

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

Answer 5

只需使用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>

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

5 个答案: