jQuery单击事件的下拉列表项

Question

I have a drop down list in an MVC application. When an item in the drop down list is selected (including the same one), I want to trigger a function. However, the first item in the list can't trigger the function and it should be disabled. I have some code below which works initially but after clicking a valid option and then clicking --Select-- again, it still fires the code. How do I fix this?

MVC Control

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

jQuery to trigger the DDL click event

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

jQuery to disable the first option

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

Answer 1

Get the index of the selected option and check to see if it's greater than 0 on event fire. Indexes are 0 based.

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

Answer 2

I deleted the code to disable the first option because I couldn't get it to stay disabled after the first change. I modified the jQuery to trigger the event to:

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

Then I added styling to the --Select-- box to make it gray. You can still click on it but it won't do anything. Not exactly what I was trying to do but close enough