Javascript 未捕获引用错误：未定义Bind_ChainHotel

我在javascript中定义了一个名为Bind_ChainHotel的函数，在更改下拉列表选择时，我通过ajax将数据填充到另一个下拉列表中。我正在MVC5中使用HtmlHelper.DropDownList。每当我选择任何选项时，我都会在控制台中看到这个错误

 @Html.DropDownList("ddlShellLevel", new List<SelectListItem>
                                                    {
                                                        new SelectListItem{Text="Chain",Value= "1"},
                                                        new SelectListItem{Text="Hotel",Value= "2"}
                                                    }, "Select Level", new { onchange = "Bind_ChainHotel(this.value);", @class = "form-control" })

@Html.DropDownList（“ddlShellLevel”），新列表
{
新建SelectListItem{Text=“Chain”，Value=“1”}，
新建SelectListItem{Text=“Hotel”，Value=“2”}
}，“选择级别”，新建{onchange=“Bind_ChainHotel（this.value）；”，@class=“form control”}）

Javascript

(function Bind_ChainHotel(id) {
    $.ajax({
        url: '@Url.Action("Bind_ChainHotel", "Shell")',
        type: "POST",
        data: { "id": id },
        success: function (data) {
            $("#ddlChain_Hotel").empty();
            $.each(data, function (i, chain_hotel) {
                $("#ddlChain_Hotel").append('<option value="' + chain_hotel.Value + '">' +
                     chain_hotel.Text + '</option>');
            });
            if (id == 1) {
                $('#lblChainHotel').text('Select Chain');
                $("#ddlChain_Hotel").prepend('<option value="0">Select Chain</option>');
            }
            else {
                $("#lblChainHotel").text("Select Hotel");
                $("#ddlChain_Hotel").prepend('<option value="0">Select Hotel</option>');
            }
        }
    });
})();

（功能绑定链接酒店（id）{
$.ajax({
url:'@url.Action（“Bind_ChainHotel”，“Shell”），
类型：“POST”，
数据：{“id”：id}，
成功：功能（数据）{
$（“#ddlu酒店”）.empty（）；
各美元（数据、功能（i、连锁酒店）{
$（“#迪卢酒店”）。附加（“”）+
chain_hotel.Text+“”）；
});
如果（id==1）{
$（'lblChainHotel'）。文本（'Select Chain'）；
$（“#ddlChain_Hotel”）.prepend（'Select Chain'）；
}
否则{
$（“#lblChainHotel”）.text（“选择酒店”）；
美元（“#ddlu Hotel”）.prepend（'Select Hotel'）；
}
}
});
})();

删除前括号和后括号

function Bind_ChainHotel(id) {
  $.ajax({
    .....
  });
};

---

斯蒂芬·穆克的回答是对的，但他懒得解释，所以我会这么做

如下定义一个函数，注意它是定义和存储的，未执行的

function Bind_ChainHotel(id) { /* do something with id */ }

现在，当您在名称中添加括号

（）

时，您可以通过名称调用该函数。由于函数已存储，因此您可以在需要的任何位置和频率执行此操作：

Bind_ChainHotel("myId"); // with this invocation function is executed

在代码中，您同时执行定义和执行，函数在括号内定义，然后在末尾添加第二个括号后立即执行：

(function Bind_ChainHotel(id) { /* do something with id */ }) ();

这称为IIFE（立即调用的函数表达式）。该函数未被存储，执行一次后，就不能再调用了

还有一个不是错误，但值得注意的是：您多次编写

$（“#ddlChain_Hotel”）

，每次都创建一个具有相同内容的新jQuery对象。这需要大量的编写和执行时间。创建一个对象并将其存储在变量中，然后根据其名称引用变量

// wrap the code in a $(document).ready to ensure that all DOM elements are there at runtime
$(document).ready(function() {

    var ddlChain = $("#ddlChain_Hotel"),
        lblChain = $('#lblChainHotel');

    function Bind_ChainHotel(id) {
        $.ajax({
            /* ... */
            success: function(data) {
                ddlChain.empty(); // var ddlChain holds $("#ddlChain_Hotel")
                /* ... */
            }
        });
    }
});

---

正如我在回答中所说，删除

函数之前的前导
（
）和最后一个
）（）
（并确保脚本位于页面底部或包装在
文档中。准备好了吗