jquery - Storing select options and optgroups in a JavaScript array - Stack Overflow

I'm making a jQuery plugin that loops through html select <option> tags and outputs them in

I'm making a jQuery plugin that loops through html select <option> tags and outputs them in a different format.
When looping through the options, I'd also like to maintain the relationship between them and <optgroup>s. Being a PHP guy I thought a multidimensional associative array would be the answer. So something like this:

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

...would turn into something like this:

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

Is this possible in javascript or jQuery?

I'm making a jQuery plugin that loops through html select <option> tags and outputs them in a different format.
When looping through the options, I'd also like to maintain the relationship between them and <optgroup>s. Being a PHP guy I thought a multidimensional associative array would be the answer. So something like this:

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

...would turn into something like this:

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

Is this possible in javascript or jQuery?

Share Improve this question edited May 17, 2017 at 10:59 cweiske 31.2k15 gold badges147 silver badges205 bronze badges asked Oct 20, 2012 at 20:56 MikeMike 1311 gold badge2 silver badges12 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

Some fancy jQuery code, I believe it should work tested it, and it works as expected.

var o = {};

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

console.log(o);​

Live DEMO

It's possible, but as an object {} rather than an array [] (which in JavaScript has strictly ordered numeric keys, zero based):

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

You might create it using something like the following in plain 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"]}

Here's a working fiddle.

You can store this as an object

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

Here can access the options inside optgroup using ..

myArray.group1[0] // Will give you option 1 
myArray.group2[0] // Will give you option 3 

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745416494a4626773.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信