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数组包含一些值（dropdownlistbox中存在的值）。一旦我点击drodpown i ant隐藏这些值。但是下面的代码不起作用。

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

选择隐藏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 Chosen drodpown列表框的onclick事件？

2 个答案: