web-dev-qa-db-fra.com

Comment sélectionner des options dans la liste de sélection multiple avec jQuery?

J'ai deux listes déroulantes. Lorsqu'un utilisateur sélectionne une valeur parmi la première que je souhaite dans la seconde (avec l'option de sélection multiple), avec jQuery, sélectionne automatiquement certaines valeurs. Comment puis je faire ça?

First select box:
<select id="update_carte_s" name="update_carte_s">
     <option value="5!**8,9**!6!44.9">Ghid complet Internet</option>
     <option value="6!**6,7**!6!24.95">PC pas cu pas</option>
     <option value="7!**10**!3!27.95">Jocul ingerului</option>
     <option value="8!**11,12**!8!39">Ghidul vinurilor</option>
</select>
Second select box:
<select id="uc_autori_s" name="uc_autorilist[]" size="5" multiple>
     <option value="3">Rose Tremain</option>
     <option value="4">Jonathan Coe</option>           
     <option value="5">Cecilia Ahern</option>
     <option value="6">Marinel Serban</option>
     <option value="7">Emanuela Cherchez</option>
     <option value="8">Peter Buckley</option>
     <option value="9">Clark Duncan</option>
     <option value="10">Carlos-Ruiz Zafon</option>
     <option value="11">Catalin Paduraru</option>
     <option value="12">Dan-Silviu Boerescu</option>
</select>

Les valeurs en gras de la première zone de sélection divisée par , sont les valeurs que je souhaite sélectionner dans la deuxième zone de sélection. Par exemple, 11,12 signifie dans la deuxième case les options avec les valeurs 11 et 12 à sélectionner.

Actuellement, j'ai quelque chose comme ça:

$.bookAuthors = $.bookDetailsArray[1].split(',');
$.each($.bookAuthors, function( intIndex, objValue ){
      $("#uc_autori_s").val(objValue).attr("selected","selected");
});

mais le problème est que seule la dernière valeur est sélectionnée dans mon cas 12 (la sélection de 11 est perdue).

jquerydrop-down-menu
25
Sorin Antohi

Vous ne pourrez pas utiliser la méthode val pour définir plusieurs options comme sélectionnés. Au lieu de cela, vous devez sélectionner l'option elle-même et définir son attribut sélectionné:

$('#uc_autori_s option[value=' + objValue + ']').attr('selected', true);
49
bdukes

Vous pouvez passer une sélection avec plusieurs valeurs d'un tableau

$("#uc_autori_s").val( $.bookAuthors );
51
SurferJoe

Par exemple, vous avez une zone de sélection comme celle-ci:

<select id="books">
  <option value="1">Harry Porter</option>
  <option value="2">Eragon</option>
  <option value="3">Gadfly</option>
  <option value="4">C++ For Dummies</option>
  <option value="5">Android Cookbook</option>
</select>

Pour sélectionner plusieurs options (Eragon, Gadfly par exemple), vous devez créer un objet contenant les valeurs des options que vous souhaitez sélectionner, puis utilisez ceci:

var options = ["2", "3"];
$("#books").val(options);
21
codingpuss

Voici le moyen simple de rechercher et de sélectionner une liste déroulante multi-sélection

 $('#selectID ').children("option[value=" + myValue + "]").prop("selected", true);
1
Athul Nalupurakkal
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>

<script>
$("#multiple").val(["Multiple2", "Multiple3"]);
</script>
1
Aleksey

Vous devez suivre les instructions pour sélectionner des valeurs dans multiselect. Étant donné que multiselect renvoie un tableau de valeurs lorsqu'il est sélectionné, vous devez lui donner le même nom lorsque ses valeurs doivent être définies par défaut.

<select id="sonyConsoles" multiple>
<option value="1">PS4 Pro</option>
<option value="2">PS4</option>
<option value="3">PS3</option>
<option value="4">PS Vita</option>
<option value="5">PSP</option>
</select>

Si vous souhaitez que les options 1, 2 et 4 soient sélectionnées par défaut, faites; $ ('# sonyConsoles'). val ([1,2,4]);

Ceci renverra la case à cocher qui a les options 1, 2 et 5 sélectionnées.

0
Majid Ali Khan

Vous devez supprimer les options en cours afin de manipuler les options sélectionnées.

Voici un exemple comment ajouter des options:

<select id="mySelectId">
  <option value=""></option>
  <option value="Argentina">Argentina</option>
  <option value="Germany">Germany</option>
  <option value="Greece">Greece</option>
  <option value="Japan">Japan</option>
  <option value="Thailand">Thailand</option>
</select>

<script>
  mySelect = $('#mySelectId');
  var selected = mySelect.val();                         //get current values
  selected = selected.concat(['Germany','Argentina']);   //merge with new values
  selected = Array.from(new Set(selected));              //make values unique
  mySelect.val(null);                                    //delete current options
  mySelect.val(selected);                                //add new options
</script>

Pour selected.js, ajoutez:

<script>
  mySelect.trigger('chosen:updated');
</script>
0
Tobi G.

La méthode la plus simple et la plus récente de jQuery consiste à utiliser la fonction map

    var abc = $("select option:selected").map(function() {
                    return this.value;
                }).get().join(",");
0
Zeeshan