Population Select List, включая OptGroup

Question

Я заполняю список выбора с массивом данных. Как это:

$(somedata).each(function() { 
    $(document.createElement('option')) 
     .attr('value', this.Value) 
     .text(this.Text) 
     .appendTo(SelectList); 
}); 

Как добавить optgroups таким же образом? массив данных - это список со свойствами Text, Value, OptGroup (boolean) и упорядочен, поэтому сначала выбирается OptGroup, а затем его параметры. Например:

[ 
    ['OptGroup1', 'OptGroup1', true] 
    ['Value1', 'Value1', false] 
    ['Value2','Value2',false] 
    ['OptGroup2', 'OptGroup2', true] 
    // ... 
] 

Answer 1

Ответ довольно прост - проверьте, является ли 3-е значение истинным или ложным и соответствующим образом создайте соответствующий элемент.

несколько моментов, хотя:

• optgroups прикрепляемых к выбрать, а варианты должны быть приложены к последнему OPTGROUP, что вы добавили. optgroup - это контейнер опций, а не заголовок, который предшествует им.
• текст в optgroup устанавливается атрибутом label="", а не значением/текстом.

$(function() { 
 
    var somedata = [ 
 
     ['OptGroup1', 'OptGroup1', true], 
 
     ['Value1', 'Value1', false], 
 
     ['Value2', 'Value2', false], 
 
     ['OptGroup2', 'OptGroup2', true], 
 
     ['Value3', 'Value3', false], 
 
     ['Value4', 'Value4', false] 
 
    ]; 
 
    console.log(somedata); 
 
    var SelectList = $("#SelectList"); 
 
    $(somedata).each(function() { 
 
     var $newElem; 
 
     if ($(this)[2] == false) { 
 
      $newElem = $(document.createElement('option')).attr('value', this[1]) 
 
      .attr('label', this[0]) 
 
      .appendTo(SelectList.find("optgroup").last()); 
 
     } else { 
 
      $newElem = $(document.createElement('optgroup')).attr('value', this[1]) 
 
      .attr('label', this[0]) 
 
      .appendTo(SelectList);; 
 
     } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="SelectList"></select>