Select or get all values from Select drop down array using jQuery or JavaScript

Question

I have the following HTML code:

<Select name=test[]>
  <option value="">--Please Select--</option>
  <option value="a">Test Value1</option>
</select>

<Select name=test[]>
  <option value="">--Please Select--</option>
  <option value="a">Test Value2</option>
</select>

<Select name=test[]>
  <option value="">--Please Select--</option>
  <option value="a">Test Value3</option>
</select>

Now before submitting the form I want to do the following

Check if any of the above is selected.
If selected retrieve its value.

I believe I need to loop around but I am unable to find the initial syntax with which I can first grab all the values.

I know how to check if any value is selected when 'id' is given for a select element. But in this case I have the 'name' attribute which is an array.

I tried looking at different places but I haven't really come across a good solution. Probably I missed something.

Please let me know if any further information is required.

Pham · Accepted Answer · 2014-08-17 13:47:11Z

4

using map function

var selected = $('select[name="test[]"]').map(function(){
    if ($(this).val())
        return $(this).val();
}).get();

console.log(selected);

answered Aug 17, 2014 at 13:47

Pham

4414 silver badges4 bronze badges

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

Comments

Carl · Accepted Answer · 2014-02-18 13:55:25Z

1

This isn't a complete solution, but may hopefully point you in the right direction (assuming your using jQuery)

The below code should loop through your selects (when they have the name='test[]') and add any values (that aren't blank) to the result array.

var results = [];
$("select[name='test[]']").each(function(){
    var val = $(this).val();
    if(val !== '') results.push(val);  
});
console.log(results);

Demo: http://jsfiddle.net/W2Mam/

edited Feb 18, 2014 at 13:55

answered Feb 18, 2014 at 13:50

Carl

1,81613 silver badges17 bronze badges

Comments

Cpt Balu · Accepted Answer · 2014-02-18 13:58:04Z

1

The following will let you iterate through select tags which has any selected value other than default "". You can adjust it to any other unwanted values etc.

$("select[name='test[]']").each(function(){
    if($(this).val()!='')
    {
        //doStuff
    }
});

answered Feb 18, 2014 at 13:58

Cpt Balu

3713 silver badges3 bronze badges

Comments

Alberto Fecchi · Accepted Answer · 2014-02-18 13:52:46Z

0

you can check and save boxes values this way

var results = [];
$("select[name='test[]']").each(function(index, val) 
{
   if ($(val).val() == "") { 
       //Not selected 
   }
   else
   {
       //Selected
   }
   //Save results in an array based on the index of selects
   results[index] = $(val).val();
});

then you can iter through the array and check values based on index (or you can just check it above on the .each() function)

answered Feb 18, 2014 at 13:52

Alberto Fecchi

3,5161 gold badge20 silver badges34 bronze badges

2 Comments

dreamweiver Over a year ago

I think the selected option can be captured with :selected attribute

Alberto Fecchi Over a year ago

yeah, it's another solution :)

Jai · Accepted Answer · 2014-02-18 13:54:13Z

0

Try to do this way:

$("select[name='test[]']").on('change', function(){
    if(this.value != ""){
        alert(this.value);
     }else{
        alert('no values selected');
        return false;
     }
});

You have to get values on the event of change so get the elems with attribute selectors and then you can get the values of target elem.

answered Feb 18, 2014 at 13:54

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Karl-André Gagnon · Accepted Answer · 2014-02-18 14:00:16Z

0

If you use this :

var values = $('select[name^="test["]').map(function(){
    if(this.value !== "") return this.value;
})

You'll have an array of values.

To check if one is selected, just check the length : values.length

answered Feb 18, 2014 at 14:00

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Comments

billyonecan · Accepted Answer · 2014-02-18 14:13:44Z

You can use filter() to return only the selects which have a value, and then map() to get their values:

var values = $('select[name="test[]"]').filter(function() {
  return $.trim(this.value).length;  
}).map(function() {
  return this.value;
}).get();

Obviously with this you won't know which select has which value, if you need to know, you'd have to use the elements' index as that's its only unique identifier (given your markup).

The following would return an array of objects containing the elements' index, and its value:

var values = $('select[name="test[]"]').filter(function() {
  return $.trim(this.value).length;  
}).map(function() {
  return { index: $(this).index(), value: this.value };
}).get();

To check if anything was selected, you'd just check values.length:

if (!values.length) {
  alert('Nothing was selected');
}

Collectives™ on Stack Overflow

Select or get all values from Select drop down array using jQuery or JavaScript

7 Answers 7

Comments

Comments

Comments

2 Comments

Comments

Comments

Here's a fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related