Combo 打开时的 Jquery 事件

Question

我想在每次打开组合时加载组合的内容。所以我添加了如下代码:

$("#CustomerCombo").on("click", function (e) {
    $.ajax({
        type: "POST",
        url: "CustomerMaster.aspx/GetCustomer",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            CustomerLoad(data.d);
        },
        error: function (msg) { }
    });
})

function CustomerLoad(data) {
    $("#CustomerCombo").empty();
    $("#CustomerCombo").append('<option value="0">--- Select Customer ---</option>');
    for (var i in data) {
        $("#CustomerCombo").append('<option value=' + data[i].CusId + ' id=' + data[i].CusId + '>' + data[i].CusName + '</option>');
    }
}

首先我认为它工作正常。但是，当我尝试从组合中选择客户时，它会自行刷新。

如何仅在组合打开时而不是在选择客户时调用事件？

更新:

我的 HTML 代码:

<div class="form-group">
    <label class="lblCategory">Customer</label>
    <select class="form-control mandatory lblSelectCC" id="CustomerCombo">
         <option value="0">--- Select Customer Category ---</option>
    </select>
</div>

在页面加载时我也调用ajax:

$(document).ready(function () {

     $.ajax({
        type: "POST",
        url: "CustomerMaster.aspx/GetCustomer",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            CustomerLoad(data.d);
        },
        error: function (msg) { }
    });


    // other codes
});

实际上我需要类似 this 的东西。

但我无法让它与我的代码一起工作。

Answer 1

我添加了一个新答案。自定义打开事件

    var json = [{ CusId: 1, CusName: "abc" }, { CusId: 2, CusName: "xyz" }];


    $('#CustomerCombo').data('open', false);
    $('#CustomerCombo').click(function () {
        if ($('#CustomerCombo').data('open') == false) {
            $('#CustomerCombo').data('open', true);
            console.log("refereshed")
            CustomerLoad(json);
        } else {
            $('#CustomerCombo').data('open', false);
        }
    });

    function CustomerLoad(data) {
        $("#CustomerCombo").empty();
        $("#CustomerCombo").append('<option value="0">--- Select Customer ---</option>');
        for (var i in data) {
            $("#CustomerCombo").append('<option value=' + data[i].CusId + ' id=' + data[i].CusId + '>' + data[i].CusName + '</option>');
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="form-group">
    <label class="lblCategory">Customer</label>
    <select class="form-control mandatory lblSelectCC" id="CustomerCombo">
        <option value="0">--- Select Customer Category ---</option>
    </select>
</div>