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
Это круто, но как сказать, что выбранные vlaues должны быть выбраны в "множественном выборе" с id = string?
Zwen2012

@ user1824136 Отлично, рад, что смог кому-то помочь сегодня утром!
Кевин Бауэрсокс

1
Если мы в любом случае собираемся полагаться на jQuery, мы предпочтем ŁukaszW.pl $('#strings').val(values.split(',')). Без jQuery простой старый Javascript ŁukaszW.pl 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
Это сработало идеально для меня, и мои `` избранные '' выборки ... должны добавить все значения сразу (как вы сказали выше)
Тодд Вэнс

4
Хм, чистый javascript у меня не работает в Chrome / mac или FF / mac. Это не влияет на то, что фактически выбрано, по крайней мере, на то, что визуально отображается в браузере.
Билл Киз

3
Он работает, когда я передаю строку, но не когда я передаю массив.
Ravi G

Имея ту же проблему; это работает только со строковыми значениями, а не с массивами (с использованием простого JS, а не jQuery).
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преобразует объект, подобный массиву, в массив, после чего вы можете использовать для него Array.prototypeфункции, такие как find или map .

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

В основном выполните, values.split(',')а затем переберите полученный массив и установите Select.


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);
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.