Reputation: 3772
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
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
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
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
Reputation: 2472
Try using the click event, as per this answer to capture it as each item is selected.
Upvotes: 0