web-dev-qa-db-ja.com

Javascript / jQuery：複数選択で値を設定（選択）

複数の選択があります：

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

複数選択でこの値を設定するにはどうすればよいですか？配列内の文字列を変更して、複数の値として設定しようとしましたが、機能しません...！誰かがこれで私を助けることができますか？ありがとう!!!

javascriptjquerymultiple-select
82
Zwen2012

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

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

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

110
Kevin Bowersox

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はここで重要な抽象化を行います。

91
ŁukaszW.pl

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

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

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

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

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

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

注： Array#fromarray-likeオブジェクトを配列に変換し、次に、findやmapのような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>
6
kind user

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

1
kashipai

純粋な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>
1
Mariano Desanze
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
Member con