關於使用jQuery設置HTML選擇選項的問題

Question

我正在嘗試在此演示中動態更改從列表選項中選擇的項目，但是它不起作用。

<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');
});

演示版

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>