如何使用jQuery在select下拉菜单的onChange事件中获取选项的值？

Question

我正在尝试使用ScrollectBox插件实现克隆选择菜单:

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

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

我无法获取下拉菜单的选项值，它只返回选项文本。

如何使用jQuery调用函数，在以下下拉菜单onChange时获取选项的值（而不是文本）？

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

---

不起作用

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

- Klanto Aguntuk

Answer 1

根据ScrollectBox的源代码（链接），你必须使用onSelectEvent属性，示例如下：

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

- mattytommo

---

@mattytommo，感谢您编辑的代码。我已经尝试了您的代码，并使用选择菜单进行了清理和独立测试，但不幸的是它无法再次检索选项值。相反，它正在检索选项文本。此外，我已经在使用onSelectEvent:。请查看我编辑后的问题。如何在您的代码中调用选项值并与我编辑的现有代码一起使用？ - Klanto Aguntuk

@SilentPond 把 someFunction(this) 改成 someFunction($(this).val()); - Mathew Thompson

@SilentPond 你想要发出什么警报？ - Mathew Thompson

@mattytommo 我想在 onchange 事件中调用 / 获取选项值，并将其传递给函数 someFunction(this);，以便该函数可以处理这些值以完成其任务。我已经为您创建了两个匿名演示链接，以方便您查看。请查看我编辑后的问题以获取这些链接。谢谢。 - Klanto Aguntuk

@SilentPond 哦，在你的第二个例子中有一个JS错误（我的代码写错了）。将 alert(item).val(); 更改为 alert(item.val());。 - Mathew Thompson

Answer 2

您可以通过以下方式引用所选选项：$("#选择器 option:selected")。

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

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

编辑:

根据您的评论，您可以将#selector更改为.selector:

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

- Darren

---

是年纪大了让你忘了 OP 想要的是“值”而不是“文本”吗？ ;) - Mathew Thompson

@Darren Davies，“mattytommo”是正确的。它关于选项值而不是选项文本。虽然我知道你不是想要这个评论，但还是点了赞。谢谢。 - Klanto Aguntuk

@SilentPond - 我更新了我的答案，使用了val，并且我已经包含了一个示例以展示它的工作原理。 - Darren

谢谢 @Darren Davies，但是我在现有类.selection中调用函数时，能否获得值呢？ - Klanto Aguntuk

@SilentPond - 代码应该可以正常工作。当您运行它时会发生什么？ - Darren

嗨@Darren Davies，是的，您编辑过的代码独立使用时运行良好，但当我将您的代码与现有的帖子调用函数一起使用时，它会返回一个类似于test.com/index.html#的URL，这是由于https://github.com/afEkenholm/ScrollectBox/blob/master/js/ScrollectBox/jquery.scrollectbox.js的133行引起的选项onchange。这就是为什么我问如何使用现有的类调用函数$(".selection").scrollectBox（{来调用值，而不是作为单独的调用函数？谢谢。 - Klanto Aguntuk

Answer 3

尝试过这个吗？

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

- Suresh Atta

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - UI_Dev

Answer 4

我的“select”是通过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 );
    });

现在警报已经起作用了。

- Gerry