javascript - 如何获取 jQuery 选择的 drodpown 列表框的 onclick 事件？

Question

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

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

这是我的下拉列表和数据库中的绑定(bind)值。

 <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 数组包含一些值(下拉列表框中存在的值)。一旦我点击 droppown 我就会隐藏这些值。但下面的代码不起作用。

 $(".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");
});