我正在使用一個包含 optgroup 和選項元素的選擇器。我想遍歷選項并“選擇”所有具有以某個字串開頭的值的選項。例如，如果我有以下內容：
<select id="sp" class="form-control selectpicker" data-live-search="true" data-live-search-style="startsWith" multiple>
<optgroup label='Vegetables'>
<option value='V.celery'>Celery</option>
<option value='V.carrot'>Carrot</option>
<option value='V.artichoke'>Artichoke</option>
</optgroup>
<optgroup label='Fruits'>
<option value='F.cherry'>Cherry</option>
<option value='F.apple'>Apple</option>
<option value='F.papaya'>Papaya</option>
</optgroup>
</select>
還有一些按鈕“蔬菜”和“水果”，我想要所有值以“V”開頭的選項。當用戶點擊“蔬菜”按鈕時被選中。如何使用 selectpicker 'val' 選項執行此操作？謝謝！
uj5u.com熱心網友回復：
function selector() {
if (this.id === "vegBtn") document.querySelectorAll("optgroup[label='Vegetables'] option").forEach(elem => {
if (elem.value.indexOf("V.") !== -1) elem.selected = !elem.selected;
});
else if (this.id === "fruBtn") document.querySelectorAll("optgroup[label='Fruits'] option").forEach(elem => {
if (elem.value.indexOf("F.") !== -1) elem.selected = !elem.selected;
});
}
document.getElementById("vegBtn").addEventListener("click", selector);
document.getElementById("fruBtn").addEventListener("click", selector);<select id="sp" class="form-control selectpicker" data-live-search="true" data-live-search-style="startsWith" multiple>
<optgroup label='Vegetables'>
<option value='V.celery'>Celery</option>
<option value='V.carrot'>Carrot</option>
<option value='V.artichoke'>Artichoke</option>
</optgroup>
<optgroup label='Fruits'>
<option value='F.cherry'>Cherry</option>
<option value='F.apple'>Apple</option>
<option value='F.papaya'>Papaya</option>
</optgroup>
</select>
<button id="vegBtn">
Vegetables
</button>
<button id="fruBtn">
Fruits
</button>我不確定在這種情況下您是否真的需要選擇 V 或 F，但因為這是您要求的，所以我就是這樣做的。兩者并不相互排斥，因此如果您需要，則需要更多代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/448624.html
標籤：javascript html jQuery 推特引导 选择