web-dev-qa-db-ja.com

jQueryで複数選択リストのオプションを選択するにはどうすればよいですか？

2つのドロップダウンがあります。ユーザーが、jQueryを使用して、2番目に必要な最初の値（複数選択オプションがある）から値を選択すると、いくつかの値が自動的に選択されます。どうやってやるの？

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>

,で分割された最初の選択ボックスの太字の値は、2番目の選択ボックスから選択する値です。たとえば、11,12は、2番目のボックスでオプション11と12が選択されることを意味します。

現在、私はこのようなものを持っています：

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

しかし問題は、私のケース12で最後の値のみが選択されることです（11の選択は失われます）。

jquerydrop-down-menu
27
Sorin Antohi

valメソッドを使用して複数のoptionsを選択済みに設定することはできません。代わりに、オプション自体を選択し、選択した属性を設定する必要があります。

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

複数の値を持つ選択を配列に渡すことができます

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

たとえば、次のような選択ボックスがあります。

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

複数のオプション（Eragon、Gadflyなど）を選択する方法は、選択するオプションの値を含むオブジェクトを作成し、これを使用することです。

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

以下は、複数選択ドロップダウンを見つけて選択する簡単な方法です

 $('#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

複数選択で値を選択するには、以下を実行する必要があります。 multiselectは選択すると値の配列を返すため、デフォルトで値を設定する場合は、同じ値を指定する必要があります。

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

オプション1、2、および4をデフォルトで選択する場合は、実行します。 $（ '＃sonyConsoles'）。val（[1,2,4]）;

これにより、オプション1、2、および5が選択されたselectBoxが返されます。

0
Majid Ali Khan

選択したオプションを操作するには、現在のオプションを削除する必要があります。

オプションを追加する方法の例を次に示します。

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

Selected.jsの場合：

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

JQueryの最も簡単で更新された方法は、map関数を使用することです

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