CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Deep
Deep

Reputation: 347

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

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

  1. Check if any of the above is selected.
  2. 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.

Upvotes: 5

Views: 19524

Answers (7)

Pham
Pham

Reputation: 441

using map function

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

console.log(selected);

Upvotes: 4

billyonecan
billyonecan

Reputation: 20250

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');
}

Here's a fiddle

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

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

Upvotes: 0

Cpt Balu
Cpt Balu

Reputation: 371

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
    }
});

Upvotes: 1

Carl
Carl

Reputation: 1816

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/

Upvotes: 1

Jai
Jai

Reputation: 74738

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.

Upvotes: 0

Alberto Fecchi
Alberto Fecchi

Reputation: 3396

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)

Upvotes: 0

Related Questions