Estoy trabajando con un selector de selección que contiene elementos optgroup y option. Me gustaría recorrer las opciones y "seleccionar" todas las opciones que tienen un valor que comienza con una determinada cadena. Por ejemplo, si tengo lo siguiente:
<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>y algunos botones "Vegetales" y "Frutas", me gustaría todas las opciones que tienen valores que comienzan con "V". que se seleccionará cuando el usuario haga clic en el botón "Verdura". ¿Cómo puedo hacer esto usando la opción selectpicker 'val'? ¡Gracias!
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>No estoy seguro de si realmente necesita seleccionar V o F en esta situación, pero como eso es lo que solicitó, eso es lo que hice. Los dos no son mutuamente excluyentes, por lo que si necesita eso, requiere más código.