JavaScript / jQuery:複数選択で値(選択)を設定する


100

複数選択があります:

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

データベースからデータをロードします。それから私はこのような文字列を持っています:

var values="Test,Prof,Off";

複数選択でこの値を設定するにはどうすればよいですか?すでに配列内の文字列を変更して複数の値として配置しようとしましたが、機能しません...!誰かがこれを手伝ってくれますか?ありがとう!!!

回答:


133

属性セレクターを利用する動的セレクターの値を使用してループを反復します。

var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
    $("#strings option[value='" + e + "']").prop("selected", true);
});

動作例 http://jsfiddle.net/McddQ/1/


1
それはすばらしいですが、選択した値はid = stringを使用して「複数選択」で選択する必要があるとどのように言えますか?
Zwen2012 2013年

@ user1824136すばらしい、今朝誰かを助けることができてうれしい!
Kevin Bowersox 2013年

1
とにかくjQueryに依存する場合は、ŁukaszW.plをお勧めし$('#strings').val(values.split(','))ます。jQueryがなければ、ŁukaszW.plのPlain Old Javascript document.getElementById('strings').value = ["Test", "Prof", "Off"]もワンライナーで実行されます
KyleMit

109

jQuery:

$("#strings").val(["Test", "Prof", "Off"]);

または純粋なJavaScriptで:

var element = document.getElementById('strings');
var values = ["Test", "Prof", "Off"];
for (var i = 0; i < element.options.length; i++) {
    element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}

jQueryはここで重要な抽象化を行います。


1
これは私にとって完璧に機能し、私の「選択した」選択は...すべての値を一度に追加する必要があります(上記のように)
Todd Vance

4
純粋なjavascriptがChrome / macまたはFF / macで動作しません。実際に選択されているもの、少なくともブラウザで視覚的に選択されているように見えるものには影響しません。
ビル・キース2014

3
文字列を渡すときは機能しますが、配列を渡すときは機能しません。
Ravi G

同じ問題がある; これは、配列ではなく文字列値でのみ機能します(jQueryではなくプレーンJSを使用)。
jayp

1
この問題が発生している場合は、JavaScriptで値を設定した後で、必ず「変更」イベントをトリガーしてください。jQueryを使用すると、これは$( "#strings")。val(["Test"、 "Prof"、 "Off"])。trigger( 'change');になります。
Jon Wyatt

20

jQuery val関数に値の配列を提供するだけです。

var values = "Test,Prof,Off";
$('#strings').val(values.split(','));

選択した値を同じ形式で取得するには:

values = $('#strings').val();

8

純粋なJavaScript ES6ソリューション

  • すべてのオプションをquerySelectorAll関数でキャッチし、values文字列を分割します。
  • 配列のArray#forEachすべての要素を反復処理するために使用しvaluesます。
  • Array#find指定された値に一致するオプションを見つけるために使用します。
  • selected属性をに設定しますtrue

配列のようなオブジェクトを配列にArray#from変換すると、findmapなどの関数を使用できますArray.prototype

var values = "Test,Prof,Off",
    options = Array.from(document.querySelectorAll('#strings option'));

values.split(',').forEach(function(v) {
  options.find(c => c.value == v).selected = true;
});
<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>


2

基本的にa values.split(',')を実行し、結果の配列をループして、選択を設定します。


1

純粋なJavaScript ES5ソリューション

何らかの理由でjQueryもES6も使用していませんか?これはあなたを助けるかもしれません:

var values = "Test,Prof,Off";
var splitValues = values.split(',');
var multi = document.getElementById('strings');

multi.value = null; // Reset pre-selected options (just in case)
var multiLen = multi.options.length;
for (var i = 0; i < multiLen; i++) {
  if (splitValues.indexOf(multi.options[i].value) >= 0) {
    multi.options[i].selected = true;
  }
}
<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On" selected>On</option>
</select>


0
var groups = ["Test", "Prof","Off"];

    $('#fruits option').filter(function() {
      return groups.indexOf($(this).text()) > -1; //Options text exists in array
    }).prop('selected', true); //Set selected

0

これは、置換のいくつかの回答のエラーです。

var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);

この修正は正しいですが、| 最終的には次のようになります\ |

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.