Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite

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]

share|improve this question

3 Answers

up vote 4 down vote

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());
        }
    });
});
share|improve this answer
lol beat me to it ;) – Darren Davies Mar 21 at 11:52
Writing comment ate my 1 min time :( – Baadshah Mar 21 at 12:00
how can i call the function within the select menu class .selection but not the id #selector ? thanks, – Silent Pond Mar 21 at 12:34
@SilentPond Just change #selector with .selector – mattytommo Mar 21 at 12:35
@SilentPond See here jsfiddle.net/FhFju/1 – mattytommo Mar 21 at 12:35
show 10 more comments
up vote 2 down vote

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);
});
share|improve this answer
Beat you by 24 seconds ;) – mattytommo Mar 21 at 11:52
@mattytommo old age ;) – Darren Davies Mar 21 at 11:54
Is it the old age that made you miss that the OP wants the value and not the text? ;) – mattytommo Mar 21 at 11:54
@mattytommo quite possibly :-) - Speaking of the food and drink context, lunch time! – Darren Davies Mar 21 at 11:58
@Darren Davies, mattytommo is correct. it's about the option value but not the option text. but up vote for the comment though i know you weren't after that. thanks, – Silent Pond Mar 21 at 12:16
show 4 more comments
up vote 1 down vote

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);
        });
share|improve this answer
Writing comment ate my 1 min time :( – Baadshah Mar 21 at 11:59
up vote for the comment that ate 1 minute of your time. thanks, – Silent Pond Mar 21 at 12:17
concentrated on description not on time :) – Baadshah Mar 21 at 12:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.