how to get the value of an option in select menu onChange using jquery?

Question

i'm trying to implement clone select 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'm unable to get the option value of select menu. it returns option text instead.

how to get the value (but not text) of an option in the following select menu onChange using 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:

Doesn't 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]

Doesn't 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]

Answer 1

According to the source code for ScrollectBox , you must use the onSelectEvent property, like so:

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

Answer 2

You can refer to the selected option via: $("#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);
});

Answer 3

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

Answer 4

My "select" is provided via an AJAX call, and I could not get the calling program to work with the .change method.

The table (not declared until an AJAX call is made) 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 needed in the calling program was

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

Now the alert works.