CODEWITHSUNDEEP
jquery
Just in Mind
Just in Mind

Reputation: 130

Selectbox get all option values jquery

<select id="selectBox">
    <option value="all">all</option>
    <option value="0">Number 0</option>
    <option value="1">Number 1</option>
    <option value="2">Number 2</option>
    <option value="3">Number 3</option>
    <option value="4">Number 4</option>
    <option value="5">Number 5</option>
    <option value="6">Number 6</option>
    <option value="7">Number 7</option>
</select>

If the user select all option i need to get all the other option value like 0,1,2,3,4,5,6,7

My code is: 

$("#selectBox").live('change', function () {
    var val = this.value;
    if (val == "all") {
        $("#selectBox>option").map(function () {
            alert($(this).val());
        });
    }
});

Any idea?

Upvotes: 3

Views: 1878

Answers (9)

Runcorn
Runcorn

Reputation: 5224

You could achieve same thing using children and map

mapValue= $("select#selectBox").children().not(":first").map(function() {
        return $(this).val();
}).get();

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

Demo use filter() 

$("#selectBox").on('change', function () {
    var val = this.value;
    if (val == "all") {

        var test = $("#selectBox option").filter(function (i, valu) {

            return val != valu.value
        }).get();

        // if you jquery object 
        alert(test)
        // if you need value do like this
        $(test).each(function (i, val) {
            alert(val.value)
        });
    }

});

Upvotes: 0

Amit Kumar
Amit Kumar

Reputation: 5962

use on rather than using live 

$("#selectBox").on('change',function()
             {                
              var val=this.value;
               if (val=="all") {
               $("#selectBox  option").each(function() {
    alert(this.text + ' ' + this.value);
                });                
              }    
             });

Demo

Upvotes: 0

Jai
Jai

Reputation: 74738

update to this:

var val = this.value, 
    allValues = '';
if (val=="all") {
     allVals = $("#selectBox > option").map(function() {
          return this.value !== 'all';
     }).get();
     console.log(allVals);
}

Also instead of .live() use it with .on() method:

$(document.body).on('change', '#selectBox', function(){
    var val = this.value, 
    allVals = '';
    if (val=="all") {
       allVals = $("#selectBox > option").map(function() {
            return this.value !== 'all';
       }).get();
       console.log(allVals);
    }
});

Since in the latest jQuery libraries .live() has been removed so to use the event delegation you need to use .on() method to bind events on dynamically generated elements with a specific syntax:

$(staticParent).on(event, selector, callback);

$(document.body) can be replaced by the closest static parent of your select like any div, table etc..

Side note about .map():

I need to mention that .map() would not work in the legacy browsers like ie7. For this you can use the below mentioned code with use of .each() and .push():

$(document.body).on('change', '#selectBox', function(){
    var val = this.value, 
    allVals = [];
    if (val=="all") {
       $("#selectBox > option").each(function() {
            allVals.push(this.value);
       });
       console.log(allVals);
    }
});

Upvotes: 2

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

you should use on as it is recommended and you can get all option like this using map:

 $("#selectBox").on('change', function () {
    var val = this.value;
    if (val === "all") {

        var all = $("#selectBox>option").map(function () {
        if($(this).val() !== "all")
            return $(this).val();

        });
    }
    console.log(all)

});

OUTPUT:

["0", "1", "2", "3", "4", "5", "6", "7"]

FIDDLE DEMO

Upvotes: 3

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

Try to use .map() along with .get() to accomplish your task,

var val=this.value;
var allValues = null;

if (val=="all") {
  allValues = $("#selectBox > option:not(:first)").map(function() {
       return this.value;
  }).get();  //[0,1,2,3,4,5,6,7]
}

Full code would be,

$("#selectBox").live('change',function(){
    var val=this.value;
    var allValues = null;

    if (val=="all") {
      allValues = $("#selectBox > option:not(:first)").map(function() {
           return this.value;
      }).get();  //[0,1,2,3,4,5,6,7]
    }
});

DEMO

Upvotes: 6

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

$(document).ready(function() {
    $("#selectBox").live('change',function()
    {
      var val=this.value;
      if (val=="all") {
          var values = $("#selectBox>option").not('option[value=all]').map(function() {
                 return this.value;
          }).get().join();      
        alert(values);
       }

     });
});

workind Demo

Upvotes: 0

Bazzinga...
Bazzinga...

Reputation: 1004

It works here

$(document).ready(function(){
$("#selectBox").on('change',function()
         {
          var val=this.value;
           if (val=="all") {
            $("#selectBox>option").map(function() {
              alert($(this).val());

              });
          }

         });
});

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Try this

:gt(0) remove first value either 'all' or 'select'(in my demo)

$("#selectBox").on('change', function () {
    var val = this.value;
    var urarr=[]
    if (val == "all") {
        $("#selectBox>option:gt(0)").each(function () {
            urarr.push($(this).val())
        });
    }
    alert(urarr)

});

DEMO

Upvotes: 2

Related Questions