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

Как я могу установить эти значения в множественном выборе? Уже пытался изменить строку в массиве и поместить ее в качестве значения в кратном, но не работает...! Может кто-то помочь мне с этим? СПАСИБО!!!

Источник

12 ответов

Решение

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

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

Рабочий пример http://jsfiddle.net/McddQ/1/

Источник

В 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 делает значительную абстракцию здесь.

Источник

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

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

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

values = $('#strings').val();
Источник

Чистое решение 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>

Источник 
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
Источник

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

Источник

Чистое решение 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>

Источник 
      I tried all the methods with hard-coded the way it is in the example & it is working fine for the indexes, but when I use hidden field value from the database, it just highlights the first value. Please help this is urgent.
it works for 
 var values = "1,2,3";
for the same hidden values from the database, user's preselected it just fork for number 1  
 // var values = hidden;
how var values = "1,2,3"; is different than var values = hidden values?
  My code is below :

 $(function () {
            var hdnvalues = "";
            if ($.trim($('#<%=hfroles.ClientID %>').val() != "")) {
                hdnvalues = $.trim($('#<%=hfroles.ClientID %>').val());
            }
            var values = "1,2,3";

          // var values = hdnvalues;
          
            $.ajax({
                type: "POST",
                url: "NotificationsNews.aspx/GetRoles",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var ddlRoles = $("[id*=ddlRoles]");

                    $.each(r.d, function () {
                        ddlRoles.append($("<option></option>").val(this['Value']).html(this['Text']));
                        $.each(values.split(","), function (i, e) {
                            $("#ddlRoles option[value='" + e + "']").prop("selected", true);

                        });

                    });
                }
            });
        });
Источник

все эти примеры работают только с жестко запрограммированными значениями, приведенными выше, никогда не работают с реальными значениями полей из базы данных. Как только вы замените значения базой данных, скажем, например: values ​​= $('#<%=hfroles.ClientID%>'). Val(); он не работает, он выбирает только первое значение из раскрывающегося списка. И вместо того, чтобы дать правильный ответ, если я напишу истину, переполнение стека удаляет мое мнение.

Источник

Это было давно, но для тех, кто ищет решение данного вопроса, оставляю следующую информацию;

          //My sample data is json data in array.
    let arrayData = [
        {
            blablabla: 'text1'
            ,value: 'value1'
        },
        {
            blablabla: 'text2'
            ,value: 'value2'
        },
        {
            blablabla: 'text3'
            ,value: 'value3'
        },
        
    ];
    

    for(let i = 0; i < arrayData.length; i++)
    {
        $('#multiSelect').multiSelect('select',arrayData[i].value);
        //I enter the loop and fill the data in order in each loop.
    }

    $('#multiSelect').multiSelect('refresh');
    //At the end of the loop I refresh the related item.
Источник

Использовать это:

      $('#demo').multiselect('select', value);

Для нескольких значений просто используйте цикл. Для большего количества свойств эта страница очень хороша.

Источник

Это ошибка в некоторых ответах на замену |

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

это исправление правильное, но | В итоге должно получиться так \|

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);
Источник
Другие вопросы по тегам