Создание массива, группировка на основе дочерних элементов

Question

У меня есть этот HTML:

<select id="this_id"> 
<option value="0" class="empty-item">Choose Type</option> 
<optgroup label="FirstGrouping"></optgroup> 
<option value="2">Thing1</option> 
<optgroup label="SecondGrouping"></optgroup> 
<option value="8">Thing4</option> 
<option value="4">Thing3</option> 
<optgroup label="ThirdGrouping"></optgroup> 
<option value="7">Thing8</option> 
<option value="5">Thing9</option> 
</select> 

То, что я пытаюсь сделать, это создать массив, который не будет выглядеть следующим образом:

"data": [{ 
    "Label": "FirstGrouping", 
    "Options": ["Thing1"] 
}, { 
    "Label": "SecondGrouping", 
    "Options": ["Thing4", "Thing3"] 
}, { 
    "Label": "ThirdGrouping", 
    "Options": ["Thing8", "Thing9"] 
}] 

Существует нет данный заказ optgroup и option элементов. Поэтому в основном мне нужно сначала сгруппировать optgroup и следующие элементы options в первом объекте внутри массива data. Где "Label" - optgroup и "Options" - все элементы option до следующего следующего optgroup элементов. Второй объект внутри data имеет следующие optgroup как его "Label" и "Options" следующие элементы option перед следующим элементом optgroup. И так далее.

Если optgroupбы обернутьoption элементы, то я мог бы сделать что-то вроде:

var yearz = []; 
var yearz2 = $('#this_id'); 
yearz2.each(function() { 
    var thelabel = $(this).attr('label'); 
    var lengthch = $(this).children().length; 
    var thisch = $(this).children(); 
    var theobj = []; 
    var alls = []; 
    for (var i = 0; i < lengthch; i++) { 
     alls.push({ 
      "Value": thisch.eq(i).val(), 
      "Text": thisch.eq(i).text() 
     }); 
    } 
    theobj = { 
     Label: thelabel.trim(), 
     Options: alls 
    }; 

    yearz.push(theobj); 
}); 

Но'optgroup' не завернуть option элементов. Есть ли какой-нибудь умный способ сделать это? С наилучшими пожеланиями

Answer 1

Вы можете использовать этот код: ES5

var data = []; 
 
var elems = document.getElementById('this_id').children; 
 
for (var i=0; i<elems.length; i++) { 
 
    var el = elems[i]; 
 
    if (el.tagName === 'OPTGROUP') { 
 
     data.push({ label: el.getAttribute('label'), options: []}); 
 
    } else if(el.tagName === 'OPTION' && data.length) { 
 
     data[data.length-1].options.push(el.textContent); 
 
    } 
 
} 
 
console.log(data);

<select id="this_id"> 
 
<optgroup label="FirstGrouping"></optgroup> 
 
<option value="2" style="text-indent: 10px;">Thing1</option> 
 
<optgroup label="SecondGrouping"></optgroup> 
 
<option value="8" style="text-indent: 10px;">Thing4</option> 
 
<option value="4" style="text-indent: 10px;">Thing3</option> 
 
<optgroup label="ThirdGrouping"></optgroup> 
 
<option value="7" style="text-indent: 10px;">Thing8</option> 
 
<option value="5" style="text-indent: 10px;">Thing9</option> 
 
</select>