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代码：

＆＃13;

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

＆＃13;

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

＆＃13;

创建数组，基于子元素进行分组

1 个答案: