jQuery单击事件的下拉列表项

Question

我在MVC应用程序中有一个下拉列表。 在下拉列表中选择一个项目（包括相同项目）时，我想触发一个功能。 但是，列表中的第一项无法触发该功能，因此应将其禁用。 我下面有一些代码，这些代码最初可以工作，但是在单击有效选项然后再次单击--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');

Answer 1

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

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

Answer 2

我删除了禁用第一个选项的代码，因为在第一个更改之后我无法使其保持禁用状态。 我将jQuery修改为触发事件以：

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

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