Créer tableau, le regroupement en fonction des éléments enfants

Question

J'ai ce 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> 

Ce que je suis en train de faire est de créer un tableau qui ressemblerait à ceci:

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

Il n'y a pas donné la commande de optgroup et option éléments. Donc, fondamentalement, j'ai besoin de grouper d'abord optgroup et les éléments options suivants dans le premier objet à l'intérieur du tableau data. Où "Label" est optgroup et "Options" sont tous les option éléments avant le suivant optgroup élément. Deuxième objet à l'intérieur data a optgroup"Label" et "Options" sont les option éléments suivants avant l'élément optgroup suivant. Etc.

Si optgroupenvelopperaitoption éléments, alors que je pouvais faire quelque chose comme:

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); 
}); 

Mais'optgroup' ne pas envelopper option éléments. Y a-t-il une façon intelligente de le faire? Cordialement

Answer 1

Vous pouvez utiliser ce code 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>