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

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

嘗試使用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 2

嘗試切換

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

到

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

Answer 3

引導選擇了這樣做的方法。您不應該手動操作屬性，因爲頁面中看到的元素不是原始選擇元素。

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

Demo

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

Answer 4

爲什麼有你的代碼不工作，你如何指望它有幾個原因。

您正在您的select元素上設置一個click事件，而不是在「set default」按鈕上。

您的實際選擇元素在頁面上不可見，因爲它正在被您正在使用的jquery插件取代..所以即使您設置了選擇的選定屬性，也不會在頁面上看到它。

你應該參考the documentation of that plugin找出它是如何使用的。

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>