Bad Programmer
Bad Programmer

Reputation: 3772

How to get currently selected value of a multiple select with Jquery

I have a multiple select dropdown box. I need to make an ajax call every time an item is selected, but am having a problem getting the specific value from the select menu. Instead of retrieving the currently selected value, I get an array of all selected values. How can I get the current selected value with JQuery?

Upvotes: 2

Views: 12690

Answers (4)

iamjustcoder
iamjustcoder

Reputation: 4852

Here is the fiddle to get the currently selected value from multiselect dropdown

var selectedOption;
$(document).ready(function() {
  $('#price-type').on('change', function(evt, params) {
    var currentSelection;
    if (selectedOption) {
      var currentValues = $(this).val();
      currentSelection = currentValues.filter(function(el) {
        return selectedOption.indexOf(el) < 0;
      });
    }
    selectedOption = $(this).val();
    $('#result').text(currentSelection);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="price-type" multiple="multiple">
  <option value="PRICE-1">PRICE-1</option>
  <option value="PRICE-2">PRICE-2</option>
  <option value="PRICE-3">PRICE-3</option>
  <option value="PRICE-4">PRICE-4</option>
  <option value="PRICE-5">PRICE-5</option>
</select>

<div id="result">

</div>

Upvotes: 2

Satyendra
Satyendra

Reputation: 9

You can get selected value in alert:

$("#mydropdown").on('change', function(evt, params) {
alert(params.selected);
});

This will help you to get your exact value which you want.

Upvotes: 0

Bad Programmer
Bad Programmer

Reputation: 3772

OK, just figured it out:

$(this).val();

Previously I was using $('#id').val() and that was returning the array. $(this).val() will give you the current selected value.

Upvotes: 1

akiller
akiller

Reputation: 2472

Try using the click event, as per this answer to capture it as each item is selected.

Upvotes: 0

Related Questions