how can i push select options into array of objects so that it constitutes a single select box.

i tried this

  <select name="fruit">
    <option selected="true" value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="kela">kela</option>
 </select>


var fruits = [];
$('#fruits').find('select').each(function(){
   fruits.push({
     selectName: $(this).attr('name'),
     optionValue: $(this).attr('value')

   });
});

console.log(fruits);

my question: how to push all options values so that i can get a one select box? i mean the array object must belong to a single select box

var fruits = [];
$('#fruits').find('select').each(function(){
   fruits.push({
     selectName: $(this).attr('name'),
     optionValue: [] // i want all the options values to be contained either in array or any other way
   
   });
});

console.log(fruits);

<script src=".0.3/jquery.min.js"></script>
<div id="fruits">
 <select name="fruit"><option selected="true" value="apple">apple</option><option value="banana">banana</option><option value="kela">kela</option></select>
 </div>

how can i push select options into array of objects so that it constitutes a single select box.

i tried this

  <select name="fruit">
    <option selected="true" value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="kela">kela</option>
 </select>


var fruits = [];
$('#fruits').find('select').each(function(){
   fruits.push({
     selectName: $(this).attr('name'),
     optionValue: $(this).attr('value')

   });
});

console.log(fruits);

my question: how to push all options values so that i can get a one select box? i mean the array object must belong to a single select box

var fruits = [];
$('#fruits').find('select').each(function(){
   fruits.push({
     selectName: $(this).attr('name'),
     optionValue: [] // i want all the options values to be contained either in array or any other way
   
   });
});

console.log(fruits);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="fruits">
 <select name="fruit"><option selected="true" value="apple">apple</option><option value="banana">banana</option><option value="kela">kela</option></select>
 </div>

• javascript
• jquery
• node.js

Share Improve this question Follow edited Dec 16, 2016 at 13:11 asked Dec 16, 2016 at 12:58 user5405873user5405873 9

• In short you just want the selected object in an array ? – Flying Gambit Commented Dec 16, 2016 at 13:00
• There is no value attribute in select – Mairaj Ahmad Commented Dec 16, 2016 at 13:00
• @FlyingGambit, whole select box options itself to be pushed into array – user5405873 Commented Dec 16, 2016 at 13:01
• @Leopard, i want push all the options into array object thats all – user5405873 Commented Dec 16, 2016 at 13:03
• after find() and before .each(), add .children() – Ivan Karaman Commented Dec 16, 2016 at 13:06

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 2

i know two ways, how to do this

var fruits = [];
$('#fruits').find('select').children().each(function(){
   fruits.push({
     selectName: $(this).parent().attr('name'),
     optionValue: $(this).attr('value') // all the options value

   });
});
console.log(fruits);

OR

/*var fruits = [];
$('#fruits').find('select').children().each(function(){
   fruits.push({
     selectName: $(this).parent().attr('name'),
     optionValue: $(this).attr('value') // all the options value

   });
});
console.log(fruits);*/

var select = {};
$('#fruits').find('select').each(function(){
  var propName = $(this).attr('name');
  select[propName] = [];
  $(this).children().each(function(){
    select[propName].push({
     selectName: $(this).text(),
     optionValue: $(this).attr('value') // all the options value
     });
   });
});

console.log(select);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="fruits">
 <select name="fruit"><option selected="true" value="apple">apple</option><option value="banana">banana</option><option value="kela">kela</option></select>
  <select name="vegetable"><option selected="true" value="potato">potato</option><option value="tomato">tomato</option><option value="cabbage">cabbage</option></select>
 </div>

Don't forget that <select> elements can also contain an <optgroup> children elements. I've created a little fiddle for you: https://jsfiddle/8xboz1gn/

I've created a method to which you can pass an jQuery element. It looks to all <option> items within and build an array with key, value pairs (or id, text in my case :P):

function getOptions($elem)
{
    var items = [];
    var $options =  $elem.find('option');

    $options.each(function() {
        var $option = $(this);
        items.push({
            'id': $option.val(),
            'text': $option.text()
        });
    });
    return items;
}

Hope it helps!

var fruits = [];
$('#fruits').find('select').children().each(function(){
   fruits.push({
     optionValue: $(this).attr('value')
   
   });
});

console.log(fruits);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="fruits">
 <select name="fruit"><option selected="true" value="apple">apple</option><option value="banana">banana</option><option value="kela">kela</option></select>
 </div>