2

我正在制作一个 jQuery 插件，它遍历 html 选择<option>标签并以不同的格式输出它们。
在遍历选项时，我还想保持它们与<optgroup>s. 作为一个 PHP 人，我认为多维关联数组就是答案。所以是这样的：

<select>
    <optgroup label="group1">
        <option>option 1</option>
        <option>option 2</option>
    </optgroup>
    <optgroup label="group2">
        <option>option 3</option>
        <option>option 4</option>
    </optgroup>
</select>

...会变成这样：

myArray = [
    ['group1'] => ['option 1', 'option 2'],
    ['group2'] => ['option 3', 'option 4']
];

这可能在javascriptor中jQuery吗？

4

3 回答 3

3

这是可能的，但作为一个对象 {}而不是一个数组[]（在 JavaScript 中具有严格排序的数字键，从零开始）：

myObj = {
  'group1': ['option 1', 'option 2'],
  'group2': ['option 3', 'option 4']
};

您可以在纯 JavaScript 中使用类似以下的内容来创建它。

var myObj = {};
// Get a reference to the <select>
var theSelect = document.getElementById('theSelect');
// And a node list of its <optgroup>
var optgroups = theSelect.getElementsByTagName('optgroup');
// Loop over the <optgroup>
for (var i=0; i<optgroups.length; i++) {
  // And create an object property named with the optgroup label
  myObj[optgroups[i].getAttribute('label')] = [];
  var options = optgroups[i].getElementsByTagName('option');
  // Loop over the <option>s inside it
  for (var j=0; j<options.length; j++) {
    // And stuff them into an array on the new object property:
    myObj[optgroups[i].getAttribute('label')].push(options[j].innerHTML);
  }
}
console.log(JSON.stringify(myObj));​
// {"group1":["option 1","option 2"],"group2":["option 3","option 4"]}

这是一个工作小提琴。

于 2012-10-20T20:59:01.537 回答
3

一些花哨的 jQuery 代码，我相信它应该可以对其进行测试，并且可以按预期工作。

var o = {};

$('optgroup').each(function() {
    o[this.label] = $(this).find('option').map(function() {
        return $(this).text();
    }).get();
});

console.log(o);​

现场演示

于 2012-10-20T21:00:30.940 回答
-1

您可以将其存储为对象

myArray = {
    'group1' : ['option 1', 'option 2'],
    'group2' : ['option 3', 'option 4']
};

这里可以使用 .. 访问 optgroup 中的选项。

myArray.group1[0] // Will give you option 1 
myArray.group2[0] // Will give you option 3
于 2012-10-20T20:59:30.113 回答