Me preguntaba si es posible hacer que jQuery seleccione una <option> , digamos el cuarto elemento, en un cuadro desplegable.
<select> <option></option> <option></option> <option></option> <option></option> <option></option> </select> Quiero que el usuario haga clic en un enlace, luego haga que el cuadro <select> cambie su valor, como si el usuario lo hubiera seleccionado haciendo clic en <option> .
Qué tal si
$('select>option:eq(3)').attr('selected', true);Ejemplo:
$('select>option:eq(3)').attr('selected', true); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> para las versiones modernas de jquery, debe usar .prop() en lugar de .attr()
$('select>option:eq(3)').prop('selected', true);Ejemplo:
$('select>option:eq(3)').prop('selected', true); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>La solución:
$("#element-id").val('the value of the option');Los elementos de selección HTML tienen una propiedad de selectedIndex que se puede escribir para seleccionar una opción en particular:
$('select').prop('selectedIndex', 3); // select 4th optionUsando JavaScript simple, esto se puede lograr mediante:
// use first select element var el = document.getElementsByTagName('select')[0]; // assuming el is not null, select 4th option el.selectedIndex = 3;