下拉列表项的Jquery单击事件答案

【问题标题】：Jquery click event for drop down list items下拉列表项的Jquery单击事件
【发布时间】：2017-05-09 14:21:15
【问题描述】：

我在 MVC 应用程序中有一个下拉列表。 When an item in the drop down list is selected (including the same one), I want to trigger a function.但是，列表中的第一项不能触发该功能，应该禁用它。我在下面有一些代码最初可以工作，但是在单击有效选项然后再次单击 --Select-- 之后，它仍然会触发代码。我该如何解决这个问题？

MVC 控制

@Html.DropDownList("ddlCountries", (IEnumerable<SelectListItem>)ViewBag.Countries, "--Select--", new { @class = "form-control" })

jQuery触发DDL点击事件

$('#ddlCountries option:not(:first)').click(function () {
            runCode()
});

jQuery 禁用第一个选项

jQuery('#ddlCountries option:contains("--Select--")').attr('disabled', 'disabled');

【问题讨论】：

当您第一次选择您的选项并触发事件时，如果用户再次单击该选择，您不希望它再次触发吗？
个人而不是做一些花哨的事情，我只会检查函数。 if ($('ddlCountries').val() == "") 返回；类似的东西
我从不想选择触发任何东西。理想情况下，单击它不会执行任何操作（禁用）。但我希望 DLL 中的任何其他项目在被选中时总是触发某些东西。
我不想检查值，因为项目是动态添加的，所以我认为每次检查值都不理想

标签： javascript jquery asp.net-mvc

【解决方案1】：

获取所选选项的索引并检查它在事件触发时是否大于 0。索引从 0 开始。

$('#ddlcountries').on('change', function() {
  var index = $(this).find('option:selected').index();
  if (index > 0) {
    alert('yay');
    runCode();
  } else {
    alert('nay');
    return;
  }
})

【讨论】：

【解决方案2】：

我删除了禁用第一个选项的代码，因为在第一次更改后我无法让它保持禁用状态。我修改了 jQuery 来触发事件：

jQuery('#ddlCountries').find('option:gt(0)').click(function () {
    runCode()
});

然后我将样式添加到 --Select-- 框以使其变为灰色。您仍然可以单击它，但它不会做任何事情。不完全是我想要做的，但足够接近

【讨论】：

改用on 事件。 $('#ddlCountries').on('click','option:gt(0)', function() { .. })stackoverflow.com/questions/10082031/…