4

我正在尝试使用以下插件实现克隆选择菜单：

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

但我无法获得选择菜单的选项值。它改为返回选项文本。

如何onChange使用 jquery 调用函数在以下选择菜单中获取选项的值（但不是文本）？

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

谢谢，

重新编辑：

不工作

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

它返回[object Object]

不工作

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

它返回[object Object]

4

4 回答 4

4

根据ScrollectBox的源代码，您必须使用该onSelectEvent属性，如下所示：

jQuery(document).ready(function($){ 
    $(".selection").scrollectBox({
        preset: 'dropdown',
        numVisibleOptions: 4,
        scrollInterval: 150, 
        scrollOn: 'hover',
        onSelectEvent: function (item, event) {
           alert(item.val());
        }
    });
});
于 2013-03-21T11:52:07.027 回答
3

您可以通过以下方式参考所选选项：$("#selector option:selected")

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

JS 小提琴：http: //jsfiddle.net/Y7byM/1/

编辑：

从您的评论中，您可以更改#selector为.selector：

$(".selection").change(function() {
   var selectedValue = $(".selector option:selected").val();
   alert('Selected value ' + selectedValue);
});
于 2013-03-21T11:52:20.013 回答
2

试过这个？

$('#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);
        });
于 2013-03-21T11:53:17.067 回答
0

我的“选择”是通过 AJAX 调用提供的，我无法让调用程序使用 .change 方法。

该表（在进行 AJAX 调用之前未声明）是

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

我在调用程序中需要的 jQuery 代码是

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

现在警报有效。

于 2014-02-14T23:03:22.793 回答