get options' value list of a select in an array or JSON without using loop or jQuery each

Question

I need options' value list in an array or JSON. I have used following code.

var compArray=[];
jQuery("#myCombo option").each(function(){
       compArray.push(jQuery(this).val());
       });

But i dont want to iterate the options in a loop because my options list can grow. I have used as

JSON.stringify(document.getElementById("myCombo").options)

But on stringify it shows empty JSON objects, though I can get value from

document.getElementById("myCombo").options[0].value

I have to pass these value in request parameter to server and I do not want to go through the looping. Please suggest the optimized solution.

Are you sure this function is a bottleneck? I doubt you can do it without looping since select.options[i] is HTMLOptionElement which has references to its parent and such... Just do not create jQuery instance for each option. Array.prototype.slice.call(document.getElementById("myCombo").options).map(function (item) {return item.value;}) — Yury Tarabanko
– Yury Tarabanko, Commented Nov 19, 2012 at 9:38
hi, i'm not sure of the impact of each function, but I have to manage overall performance. Looping will cost the performance, to the extant of unresponsive script error. — sahi hai
– sahi hai, Commented Nov 19, 2012 at 10:16
hi, its for product requirement, I am developing a product, in which user can design forms with any no of controls, show control count is the count of options in the select. So I'm helpless for this. — sahi hai
– sahi hai, Commented Nov 19, 2012 at 10:44

Yury Tarabanko · Accepted Answer · 2012-11-19 10:40:10Z

1

You can use custom serializer like this:

var options = Array.prototype.slice.call(document.getElementById("sel").options),
    str = JSON.stringify(options, function(key, value){
       if(key === ""){
           return value;   
       }
       if(!isNaN(parseInt(key))) {
          return value.value;   
       }
    };

http://jsfiddle.net/Vh9qD/

Or use iteration without creating jQuery instance for every option

var options = Array.prototype.slice.call(document.getElementById("sel").options),
    str = JSON.stringify(options.map(function(item){return item.value;}));

Check this perf test: http://jsperf.com/get-options

edited Nov 19, 2012 at 10:40

answered Nov 19, 2012 at 10:11

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sahi hai Over a year ago

hi it is not working in IE8, error thrown as follows. JScript Object expected.

Yury Tarabanko Over a year ago

IE8 doesn't support Array.prototype.map. You can use a shim developer.mozilla.org/en-US/docs/JavaScript/Reference/…

sahi hai Over a year ago

It is showing script error on Array.prototype.slice.call(document.getElementById("sel").options).

sahi hai Over a year ago

thanks buddy, test 3 is showing better result in every browser, I'll use that one.

web-nomad · Accepted Answer · 2012-11-19 09:24:32Z

0

But i dont want to iterate the options in a loop because my options list can grow.

This does not have anything to do with the combo.

Whenever you add/delete a option to the combo, just call a function, which will subsequently add/delete that option from your array.

function addDeleteListInArray( oVal, addDelete ) {
   if( addDelete ) {
       // add to array
       compArray.push( oVal );
   } else {
       // delete from array
       for( var i=0; i< compArray.length; i++ ) {
          if( compArray[ i ] == oVal ) {
              compArray.splice( i, 1 );
              break;
          }
       }
   }
}

Hope this helps.

answered Nov 19, 2012 at 9:24

web-nomad

6,0133 gold badges37 silver badges49 bronze badges

2 Comments

sahi hai Over a year ago

hi thanks for your suggestion, but my option list is dynamic, options' order can be changed so on final submit only, i can iterate the options.

web-nomad Over a year ago

@sahihai - See my function. It accepts 2 parameters - oVal & addDelete. addDelete is a flag(0/1), which tells whether to add or delete. oVal is the value of the option that you add/delete. Call this every time you add/delete to/from your list.

Collectives™ on Stack Overflow

get options' value list of a select in an array or JSON without using loop or jQuery each

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related