CODEWITHSUNDEEP
javascriptjqueryhtml-select
Klanto Aguntuk
Klanto Aguntuk

Reputation: 719

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

I'm trying to implement clone select menu using the ScrollectBox plugin:

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 the select menu. It returns the 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'
    });
});
</script>

    <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>

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]

Upvotes: 4

Views: 6254

Answers (4)

Gerry
Gerry

Reputation: 11

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.

Upvotes: 0

Mathew Thompson
Mathew Thompson

Reputation: 56429

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

Upvotes: 4

Darren
Darren

Reputation: 70718

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

Upvotes: 3

Suresh Atta
Suresh Atta

Reputation: 121998

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

Upvotes: 2

Related Questions