5

Quiero seleccionar varios option por defecto con jQuery.

He intentado lo siguiente pero no me lo selecciona.

$(function(){
  $('#alergia2 > option[value="3"]').attr('selected', 'selected');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="alergias2[]" multiple="multiple" id="alergia2">
   <optgroup label="Alergias">
      <option value="3">Celíaca</option>
      <option value="2">Celíaca sin Lactosa</option>
      <option value="4">Diabética</option>
      <option value="5">Normal o Basal</option>
   </optgroup>
</select>

2
  • 4
    Tienes que quitar el > del selector (ya que el option no es el siguiente nivel si no optgroup). También podrías hacer algo así: ` $("#alergia2").val(["3","4"]);`
    – x3k
    Commented el 23 ene. 2020 a las 10:37
  • 1
    Con eso solucione el problema. Commented el 23 ene. 2020 a las 10:40

2 respuestas 2

7

Como decía x3k en los comentarios, tienes que quitar el > del selector ya que option no es hijo directo del select si no optgroup Child selector.

De todos modos, puedes hacer lo siguiente.

Si siempre serán los mismos valores los que se tienen que seleccionar por defecto, puedes poner los valores y luego recorrerlos para que se auto-seleccionen. De este modo quedará más límpio y será más mantenible.

<script>
    var values="3,4,5";

    $.each(values.split(","), function(i,e){
        $("#alergia2 option[value='" + e + "']").prop("selected", true);
    });
</script>

Haciendo esto, funciona:

Resultado

1
  • Solamente señalar que haciéndolo así, si hay algún option previamente seleccionado el mismo lo seguiría estando. Si lo que se quiere es mantener seleccionados únicamente los elementos que haya en el array, este código no sería suficiente.
    – A. Cedano
    Commented el 23 ene. 2020 a las 13:00
5

Lo puedes hacer simplemente mediante el método val(). Según la doc:

val() allows you to pass an array of element values. This is useful when working on a jQuery object containing elements like <input type="checkbox">, <input type="radio">, and <option>s inside of a <select>. In this case, the inputs and the options having a value that matches one of the elements of the array will be checked or selected while those having a value that doesn't match one of the elements of the array will be unchecked or unselected, depending on the type. In the case of <input type="radio">s that are part of a radio group and <select>s, any previously selected element will be deselected.


val() le permite pasar una matriz de valores de elementos. Esto es útil cuando se trabaja en un objeto jQuery que contiene elementos como <input type = "checkbox">, <input type = "radio"> y <option> s dentro de un <select>. En este caso, las entradas y las opciones que tengan un valor que coincida con uno de los elementos de la matriz se verificarán o seleccionarán, mientras que las que tengan un valor que no coincida con uno de los elementos de la matriz se desmarcarán o no se seleccionarán, según en el tipo. En el caso de <input type = "radio"> s que son parte de un grupo de radio y <select> s, cualquier elemento previamente seleccionado será deseleccionado.

Aquí, se seleccionarán por defecto aquellos option que tengan los valores 3 y 4. Se trata de pasar a val() un array con aquellos valores que quieres seleccionar y... listo.

Y, evita usar $(document).ready..., es obsoleto desde jQuery 3, se recomienda usar $(function() {.

//$(document).ready(function() es obsoleto desde jQuery 3
$(function() {
  $("#alergia2").val([3,4]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="alergias2[]" multiple="multiple" id="alergia2">
  <optgroup label="Alergias">
    <option value="3">Celíaca</option>
    <option value="2">Celíaca sin Lactosa</option>
    <option value="4">Diabética</option>
    <option value="5">Normal o Basal</option>
  </optgroup>
</select>

Como dice la doc, val() tiene la ventaja además de que deseleccionaría cualquier opción previa que esté seleccionada, en caso de no encontrarse en el array. Por ejemplo aquí, la opción 2 estaría seleccionada por defecto, pero cuando le pasamos a val el array [3,4] la opción 2 se deselecciona.

//$(document).ready(function() es obsoleto desde jQuery 3
$(function() {
  $("#alergia2").val([3,4]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="alergias2[]" multiple="multiple" id="alergia2">
  <optgroup label="Alergias">
    <option value="3">Celíaca</option>
    <option value="2" selected>Celíaca sin Lactosa</option>
    <option value="4">Diabética</option>
    <option value="5">Normal o Basal</option>
  </optgroup>
</select>

2
  • El $(document).ready lo he puesto yo para crear el snippet no sabia que estaba deprecado, gracias por la info :). Lo cambio.
    – x3k
    Commented el 23 ene. 2020 a las 12:31
  • 1
    @x3kagainstSEbehavior es lo adecuado, verificar que el DOM está cargado antes de trabajar con cualquier elemento de él, sólo que hay que empezar a recoger a $(document).ready y evitar que se siga propagando, cambiándolo por $(function() {. El día que lo saquen del core de jQuery todo el código que lo use va a fallar.
    – A. Cedano
    Commented el 23 ene. 2020 a las 12:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.