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";
Как установить эти значения во множественном выборе? Уже попытался изменить строку в массиве и поместить ее как значение в несколько, но не работает...!
Может кто-то помочь мне с этим? СПАСИБО!!!
Ответы
Ответ 1
Итерации через цикл, используя значение в динамическом селекторе, который использует селектор атрибутов.
var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
$("#strings option[value='" + e + "']").prop("selected", true);
});
Рабочий пример http://jsfiddle.net/McddQ/1/
Ответ 2
в 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 делает значительную абстракцию здесь.
Ответ 3
Просто предоставляйте функцию jQuery val с массивом значений:
var values = "Test,Prof,Off";
$('#strings').val(values.split(','));
И чтобы получить выбранные значения в том же формате:
values = $('#strings').val();
Ответ 4
Чистое решение JavaScript ES6
- Поймайте каждую опцию с помощью функции
querySelectorAll
и разбейте строку values
.
- Используйте
Array#forEach
для итерации по каждому элементу из массива values
.
- Используйте
Array#find
, чтобы найти параметр, соответствующий заданному значению.
- Установите для атрибута
selected
значение 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>
Ответ 5
По сути, сделайте values.split(',')
а затем values.split(',')
полученный массив и установите Select.
Ответ 6
Чистое решение для 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>
Ответ 7
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
Ответ 8
это ошибка в некоторых ответах для замены |
var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);
это исправление верно, но | В конце концов, это должно выглядеть так \|
var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);