Geek Answers Handbook

How to get option value in select onChange menu using jquery?

I am trying to implement a clone selection menu using the following plugin:

https://github.com/afEkenholm/ScrollectBox

https://github.com/afEkenholm/ScrollectBox/blob/master/index.html

https://github.com/afEkenholm/ScrollectBox/blob/master/js/ScrollectBox/jquery.scrollectbox.js

but I cannot get the value of the select menu option. instead, it returns the option text.

how to get the value (but not the text) of an option in the next onChange selection menu using the jquery call function?

 <script type="text/javascript"> jQuery(document).ready(function($){ $(".selection").scrollectBox({ preset: 'dropdown', numVisibleOptions: 4, scrollInterval: 150, scrollOn: 'hover' }); }); 

  <select onchange="function(this);" id="selector" class="selection" > <option value="" selected="Select Topic">Select Topic</option> <option value="Food">Food</option> <option value="Drink">Drink</option> </select>

thanks,

RE-EDIT:

Does not work

 <script type="text/javascript"> jQuery(document).ready(function($){ var selectEvent = function($el){ someFunction($(this).val()); return false; }; $(".selection").scrollectBox({ preset: 'dropdown', numVisibleOptions: 4, onSelectEvent: selectEvent, scrollInterval: 150, scrollOn: 'hover' }); }); </script>

it returns [object Object]

Does not work

  <script type="text/javascript"> jQuery(document).ready(function($){ $(".selection").scrollectBox({ preset: 'dropdown', numVisibleOptions: 4, scrollInterval: 150, scrollOn: 'hover', onSelectEvent: function (item, event) { alert(item).val(); } }); }); </script>

it returns [object Object]

+4
source share
4 answers

According to the ScrollectBox source code , you should use the onSelectEvent property, for example:

 jQuery(document).ready(function($){ $(".selection").scrollectBox({ preset: 'dropdown', numVisibleOptions: 4, scrollInterval: 150, scrollOn: 'hover', onSelectEvent: function (item, event) { alert(item.val()); } }); });
+4
source

You can access the selected parameter with: $("#selector option:selected")

 $("#selector").change(function() { var selectedValue = $("#selector option:selected").val(); alert('Selected value ' + selectedValue); });

JS Fiddle: http://jsfiddle.net/Y7byM/1/

Edit

From your comments, you can change #selector to .selector :

 $(".selection").change(function() { var selectedValue = $(".selector option:selected").val(); alert('Selected value ' + selectedValue); });
+3
source

Have you tried this?

 $('#selector').change(function() { // assign the value to a variable, so you can test to see if it is working. var selectVal = $('#selector :selected').val(); alert(selectVal); });
+2
source

My "choice" is provided through an AJAX call, and I could not get the caller to work with the .change method.

The table (not declared before the AJAX call) is

 <select id="provincePick"> <option value="0" >Choose a province:</option> <option value="AB">Alberta</option> <option value="BC">British Columbia</option> <option value="MB">Manitoba</option> <option value="NB">New Brunswick</option> <option value="NL">Newfoundland and Labrador</option> <option value="NS">Nova Scotia</option> <option value="ON">Ontario</option> <option value="PE">Prince Edward Island</option> <option value="QC">Quebec</option> <option value="SK">Saskatchewan</option> <option value="NT">Northwest Territories</option> <option value="NU">Nunavut</option> <option value="YT">Yukon</option>

The jQuery code I need in the calling program was

  $("body").on("change", "#provincePick", function(e) { alert( this.value ); });

Now a warning is triggered.

0
source

More articles:


All Articles