Javascript заполните выпадающий список из массива и выберите некоторые параметры - PullRequest
Новая
       23

Javascript заполните выпадающий список из массива и выберите некоторые параметры

0 голосов
/ 05 июня 2018

Я хочу выбрать опцию, где month[i][2] = "1", может быть выбрано более одного. 

function addOption_list() {
    var month = [["1", "January", ""], [["3", "Mars", ""], ["4", "April", ""], ["5", "May", ""], ["2", "February", "1"]]

    var select = document.getElementById('select_table');
    for (var i=0; i < month.length;++i){
        var option = document.createElement("OPTION"),
            txt = document.createTextNode(month[i][1]);
        option.appendChild(txt);
        option.setAttribute("value",month[i][0]);
        if(month[i][2]!=''){
            // February need to be selected
            select.insertBefore(option,select.lastchild);
        } else {
            // others not
            select.insertBefore(option,select.lastchild);
        }
    }
}

1 Ответ

0 голосов
/ 05 июня 2018

Добавьте атрибут multiple к элементу select, а затем, когда условие выполняется для данной записи массива, добавьте атрибут selected к соответствующему, только что созданному option, как этот option.setAttribute('selected', true);

function addOption_list() {
    var month = [["1", "August", "1"], ["1", "January", ""], ["3", "Mars", ""], ["4", "April", ""], ["5", "May", ""], ["2", "February", "1"]];

    var select = document.getElementById('select_table');
    for (var i=0; i < month.length;++i){
        var option = document.createElement("OPTION"),
            txt = document.createTextNode(month[i][1]);
        option.appendChild(txt);
        option.setAttribute("value", month[i][0]);
        if(month[i][2] === '1'){
            option.setAttribute('selected', true);
            select.insertBefore(option, select.lastchild);
        } else {
            select.insertBefore(option,select.lastchild);
        }
    }
}

addOption_list();
<select multiple id="select_table"></select>

При запуске фрагмента вы увидите два выбранных элемента, потому что я добавил ["1", "August", "1"] в список.

И вы можете изменитьВаш код немного, чтобы сделать его более читабельным, как это. 

function addOption_list() {
  const month = [["1", "August", "1"], ["1", "January", ""], ["3", "Mars", ""], ["4", "April", ""], ["5", "May", ""], ["2", "February", "1"]];
  const select = document.getElementById('select_table');

  month.forEach(mnth => {
    const option = document.createElement('OPTION');
    option.textContent = mnth[1];
    if (mnth[2] === '1') { option.setAttribute('selected', true) };
    select.append(option);
  });
}

addOption_list();
<select multiple id="select_table"></select>
...