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--框中以使其變為灰色。 您仍然可以單擊它，但它不會執行任何操作。 不完全是我想做的事，但足夠接近