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 e across a good solution. Probably I missed something.
Please let me know if any further information is required.
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 e across a good solution. Probably I missed something.
Please let me know if any further information is required.
Share Improve this question edited Aug 2, 2022 at 13:06 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Feb 18, 2014 at 13:42 DeepDeep 3473 gold badges8 silver badges22 bronze badges7 Answers
Reset to default 4using map function
var selected = $('select[name="test[]"]').map(function(){
if ($(this).val())
return $(this).val();
}).get();
console.log(selected);
This isn't a plete 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/W2Mam/
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
}
});
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)
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.
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
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');
}