Select or retrieve all the values ​​from the Select dropdown 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

  • Check if any of the above are selected.
  • If selected, select its value.

I believe I need to go in cycles, but I cannot find the initial syntax with which I can capture all the values ​​first.

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

I tried looking at different places, but actually I did not find a good solution. I probably missed something.

Please let me know if any further information is needed.

+4
7

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

console.log(selected);
+3

, , , (, jQuery)

( name='test[]') ( ).

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

: http://jsfiddle.net/W2Mam/

+1

select, , "". ..

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

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

( .each())

0

:

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

change, , .

0

:

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

.

, , : values.length

0

filter(), selects, , map(), :

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

Obviously, with this, you will not know what choice matters, if you need to know, you will need to use the element index as the only unique identifier (given your markup).

Next, an array of objects containing the index of the elements and its value will be returned:

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 something has been selected, you simply set values.length:

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

Here is the violin

0
source

Source: https://habr.com/ru/post/1527519/


All Articles