How to fetch all the option values(selected/unselected) in a selectbox

Question

I want to fetch all the option values(selected/unselected) in a selectbox on click of a button. How can I do this?

Answer 1

I think is a good opportunity to use the Traversing/map method:

var valuesArray = $("#selectId option").map(function(){
  return this.value;
}).get();

And if you want to get two separate arrays containing the selected and unselected values you can do something like this:

var values = {
  selected: [],
  unselected:[]
};

$("#selectId option").each(function(){
  values[this.selected ? 'selected' : 'unselected'].push(this.value);
});

After that, the values.selected and values.unselected arrays will contain the right elements.

Answer 2

var arr = new Array;

    $("#selectboxid option").each  ( function() {
       arr.push ( $(this).val() );
    });

alert ( arr.join(',' ) );

in the button click

    $("#btn1").click ( function() {
        var arr = new Array;
        $("#selectboxid option").each ( function() {
            arr.push ( $(this).val() );
        });
        alert ( arr );
    });

Answer 3

err ok ..

$('#selectbox').click(function() {
  var allvals = [];
  $(this).find('option').each(function() { allvals.push( $(this).val() ); };
});

or maybe you mean

$('#thebutton').click(function() {
  var allvals = [];
  $('#theselectbox').find('option').each(function() { allvals.push( $(this).val() ); };
});