jQuery：选择下拉菜单上的 onclick 事件的自定义函数答案

【问题标题】：jQuery: Custom function for onclick event on select dropdownjQuery：选择下拉菜单上的 onclick 事件的自定义函数
【发布时间】：2015-11-10 13:53:00
【问题描述】：

寻找一种将自定义 onlick 事件附加到选择下拉列表的方法。通过单击任一选项，应调用自定义函数。

我的代码由以下 HTML 组成：

<select name="database" id="database">
    <option disabled selected> -- select an option -- </option>
    <option>MySQL database format</option>
    <option>PostgreSQL database format</option>
    <option>Oracle database format</option>
    <option>Other format</option>
</select>

基于另一个问题 (Trying to get a jQuery event to Fire onClick on a select/option form) 我创建了这个 JS + jQuery + jQueryUI 代码：

$("#database").selectmenu();
$("#database").change(function() {
    alert("A1");
});

https://jsfiddle.net/1ba470wL/5/

出了点问题，函数没有被调用，问题出在哪里？

【问题讨论】：

你的小提琴坏了，因为selectmenu() 不是标准的 jQuery 方法，而且你还没有包含包含它的库。
未捕获类型错误：$(...).selectmenu 不是函数
有些东西仍然无法正常工作，即使在小提琴之外并使用正确的 jQuery UI 库
如果没有问题的示例，我们将无能为力。删除无关的 selectmenu() 行，您的代码可以正常工作：jsfiddle.net/1ba470wL/4
Selectmenu 是 jQuery UI 中的标准 UI 组件，在 fiddle 之外的相同示例中工作，而 change 事件则没有。我将 jQueryUI 导入到代码示例中：jsfiddle.net/1ba470wL

标签： jquery html jquery-ui select onclick

【解决方案1】：

解决办法是把change事件改成selectmenuchange，这是jQueryUI处理事件不同造成的。

$("#database").selectmenu();
$("#database").on("selectmenuchange",function() {
    alert("A1");
});

【讨论】：

【解决方案2】：

$("#database").selectmenu(); 未定义

https://jsfiddle.net/1ba470wL/2/

【讨论】：

已修复，但这不是主要问题的一部分

【解决方案3】：

我不确定你想要达到什么目的..

$("#database").on("click", function() {
    console.log("custom function");
});

你的小提琴坏了，因为你缺少一个外部库（你通过 selectmenu() 调用的那个）

【讨论】：

我正在尝试检测选择某个选项时的事件，以便根据选择的选项显示另一个菜单。

【解决方案4】：

使用您示例中的 html：

$("#database").on("change", function(){
//Code here
});

【讨论】：

添加解释代码的作用以及您这样做的原因可能会很有用。它通常使提问者更清楚，进而帮助您的答案被接受。

【解决方案5】：

不确定您到底要做什么。

$("#database").on('change', function() {
	var selected_value = $(this).val();
    alert(selected_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="database" id="database">
    <option disabled selected> -- select an option -- </option>
    <option value="mysql">MySQL database format</option>
    <option value="postgreSQL">PostgreSQL database format</option>
    <option value="oracle">Oracle database format</option>
    <option value="Other">Other format</option>
</select>

【讨论】：

我需要捕获 onclick 事件，这会使其他表单字段可见。
然后您可以获取所选选项的值并执行您需要执行的操作。查看更新的 sn-p。