CODEWITHSUNDEEP
javascriptjquery
user5457418
user5457418

Reputation:

Getting value of selected option from multiple select fields at once

Imagine having x amount of select fields (value of x is not set in stone). I would like to get values of selected option of each select fields using jQuery (or vanilla JavaScript).

My approach: 

var cars = $(".select").find("option:selected").val();
$(".select").on("click", function() {
  $(".show-value").html("value: " + cars);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>
<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>
<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>
<div class="show-value"></div>

That is giving the first val(). only - I would like an array. Fun fact - when I change val() to text() it will pick up 3 'text values' without problem. Why is that?

Upvotes: 1

Views: 60

Answers (4)

Karthik Rajan
Karthik Rajan

Reputation: 165

You can use this too. 

 $( ".select" ).each(function( index ) {
      console.log( index + ": " + $( this ).val() );
    });
//this will return all of the dropdown selected values

Upvotes: 0

Coral Kashri
Coral Kashri

Reputation: 3506

$(".select").on("change", function() {
  $(".show-value").html("value: " + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" name="test" id="">
        <option value="0">Ford</option>
        <option value="1">Honda</option>
        <option value="2">BMW</option>
    </select>
    
    <select class="select" name="test" id="">
        <option value="0">Ford</option>
        <option value="1">Honda</option>
        <option value="2">BMW</option>
    </select>

    
    <select class="select" name="test" id="">
        <option value="0">Ford</option>
        <option value="1">Honda</option>
        <option value="2">BMW</option>
    </select>
    
    <div class="show-value"></div>

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this: you can create values on change event of select box and push into map

$(".select").on("change", function() {
   var cars = $(".select").find("option:selected").map(function() {
    return $(this).val();
   }).get().join();
   $(".show-value").html("value: " + cars);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" name="test" id="">
        <option value="0">Ford</option>
        <option value="1">Honda</option>
        <option value="2">BMW</option>
    </select>
    
    <select class="select" name="test" id="">
        <option value="0">Ford</option>
        <option value="1">Honda</option>
        <option value="2">BMW</option>
    </select>

    
    <select class="select" name="test" id="">
        <option value="0">Ford</option>
        <option value="1">Honda</option>
        <option value="2">BMW</option>
    </select>
    
    <div class="show-value"></div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly, you're only reading the value from the first found selected option (ie. from the first select) when the page loads. This is why the value never appears to change. You need to read the value when a change event fires on the select.

Secondly, don't use the click event on select elements. Use change as I mentioned above. This is for accessibility reasons. It's also only fired when a change has been made instead of every time the options list is opened/closed.

Thirdly, you can call val() directly on a select to get its value. You don't need to use find('option:selected').

Lastly, if you want an array of the select values you can use map() to build it:

var $selects = $(".select");
$selects.on("change", function() {
  var cars = $selects.map(function() {
    return $(this).val();
  }).get();
  
  $('.show-value').text(cars.join(', '));
  console.log(cars);  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>

<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>

<select class="select" name="test" id="">
  <option value="0">Ford</option>
  <option value="1">Honda</option>
  <option value="2">BMW</option>
</select>

<div class="show-value"></div>

Upvotes: 1

Related Questions