Javascript / jQuery: установка значений (выбор) в множественном выборе

у меня есть несколько Select:

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

Как я могу установить эти значения в множественном выборе? Уже пробовал изменить строку в массиве и поместить ее как значение в multiple, но не работает...! Кто-нибудь может мне помочь? Спасибо!!!

67
javascript jquery multiple-select

7 ответов

повторите цикл, используя значение в динамическом селекторе, использующем селектор атрибутов.

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

Пример Работающего http://jsfiddle.net/McddQ/1/

92

в jQuery:

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

или в чистом javascript:

document.getElementById('strings').value = ["Test", "Prof", "Off"];
77

просто предоставьте функции jQuery val массив значений:

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

и получить выбранные значения в том же формате:

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

чистый JavaScript ES6 решение

    С до true.

Примечание: Array#from преобразует массив-как объект в массив, а затем вы можете использовать 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>
4

по сути, ценности.разделите (','), а затем выполните цикл через результирующий массив и установите Select.

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