如何为 jQuery 选中的下拉列表框获取 onclick 事件？

Question

您好，我正在开发一个 jquery 应用程序。我有一个选择了 jquery 的下拉框。

$(function () {
        $(".limitedNumbSelect").chosen();
    });

这是我从数据库中获取的下拉列表和绑定值。

 <b>Awarded To:</b>&nbsp;&nbsp;<asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>

我正在尝试获取上述下拉菜单的点击事件。一旦我点击 dropodwn，我想在加载任何选项之前发出警报。

 $('#ddlvendorss').click(function (e) {
            alert("I am going crazy");

        });

在下面的代码中，checkedValues 数组包含一些值（下拉列表框中存在的值）。只要我点击 drodpown，我就会隐藏这些值。但是下面的代码不起作用。

 $(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
        $(".limitedNumbSelect option").each(function () {
            var val = $(this).val();
            var display = checkedValues.indexOf(val) === -1;
            $(this).toggle(display);
            $('.limitedNumbSelect option[value=' + display + ']').hide();
            $(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();

        });
    });

以上代码无效。我可以得到一些建议吗？任何帮助，将不胜感激。谢谢。

Answer 1

Chosen 隐藏了 select 元素，因此您实际上并没有点击该元素。但是你可以使用 chosen:showing_dropdown 事件

$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
  alert('No need to go crazy');;
});

Fiddle

如果你想隐藏选项，你可以使用

$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
    //Find options and hide
    $(this).find('option:lt(3)').hide();
    //Update chosen
    $(this).chosen().trigger("chosen:updated");
});

Fiddle

根据 OP 的代码

$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
    //Get all options
    var options = $(this).find('option');

    //Show all
    options.show();

    //Hide based on condtion
    options.filter(function () {
        return checkedValues.indexOf($(this).val()) === -1;
    });

    //Update chosen
    $(this).chosen().trigger("chosen:updated");
});

Answer 2

不是在点击时使用，而是在更改时使用例如：

 jQuery('#element select').on('change',  (function() {

           //your code here

    }));

如何为 jQuery 选中的下拉列表框获取 onclick 事件？

How to get onclick event for jQuery Chosen drodpown listbox?

javascript

jquery

jquery-chosen