Jak wybrać opcje z listy wielokrotnego wyboru za pomocą jQuery?

Question

Mam dwa dropdowns. Kiedy użytkownik wybierze wartość z pierwszej, którą chcę w drugiej (która ma opcję wielokrotnego wyboru), z jQuery, aby wybrać niektóre wartości automatycznie. Jak mogę to zrobić?

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> 

Pogrubione wartości z pierwszego pola wyboru podzielonego przez, są wartościami, które chcę wybrać z drugiego pola wyboru. Na przykład 11,12 oznaczałoby w drugim polu opcje z wartościami 11 i 12 do wyboru.

Obecnie mam coś takiego:

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

ale problemem jest to, że tylko ostatnia wartość jest zaznaczona w moim przypadku 12 (wybór z 11 stracone)

Answer 1

Nie zamierzamy być w stanie użyć metody val do ustawienia wielu option s wybranych. Zamiast tego, należy wybrać samą opcję i ustaw jej wybrany atrybut:

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

Answer 2

można przekazać wybierz z wieloma wartościami tablicę

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

Answer 3

Na przykład, masz pole zaznaczania jak ten :

<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> 

drogę do wyboru wiele opcji (Eragon, Gadfly na przykład) jest stworzenie obiektu, który zawiera wartości opcji, które chcesz zaznaczyć, a następnie użyć tego:

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

Answer 4

<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> 

Answer 5

Trzeba usunąć bieżące opcje w celu manipulowania wybrane opcje.

Oto przykład jak dołączyć opcje:

<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> 

Dla chosen.js dodają:

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

Answer 6

Oto prosty sposób, aby znaleźć i wybrać WYBIERZ rozwijaną

$('#selectID ').children("option[value=" + myValue + "]").prop("selected", true); 

Answer 7

Należy wykonać następujące czynności, aby wybrać wartości w trybie wielokrotnego wyboru. Ponieważ multiselect zwraca tablicę wartości po wybraniu, więc to samo należy mu nadać, gdy jej wartości mają być ustawione domyślnie.

<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> 

Jeśli chcesz, aby opcje 1, 2 i 4 były wybrane domyślnie, wykonaj; $ ('# sonyConsoles'). Val ([1,2,4]);

Spowoduje to zwrócenie bloku wyboru, który ma wybraną opcję 1,2 i 5.