javascript - Issue on Setting HTML Select Option Using jQuery

Question

I am trying to change selected item from the list options dynamically at This Demo but it is not working.

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

can you please let me know what I am doing wrong?

Answer 1

Bootstrap Select 有一种方法可以做到这一点。您不应该手动操作属性，因为页面中看到的元素无论如何都不是原始的 select 元素。

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

演示

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

Answer 2

您的代码无法按预期工作的原因有多种。

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

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

您应该参考该插件的文档以了解它的使用方式。

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>