CODEWITHSUNDEEP
jqueryasp.net-mvc
Ang
Ang

Reputation: 35

jQuery drop down list change event not fire

I write Asp.Net MVC application and whant to realize cascading drop down lists functionality, but I have problem with jQuery change event. Where am I wrong?

Javascript:

<script charset="utf-8" type="text/javascript" language="javascript" src="<%= Url.Content("~/Content/jquery-1.4.1.js") %>"></script>
<script charset="utf-8" type="text/javascript" language="javascript">
  $(document).ready(function () {
      $("#ddlCategories").change(function () { alert("It worked!"); });
  });
</script>

MVC: 

<%=Html.DropDownList("CategoriesId", (SelectList)ViewData["CategoriesList"], new { Id = "ddlCategories" })%>                    
<%=Html.DropDownList("ModelId", (SelectList)ViewData["ModelsList"], new { Id = "ddlModels" })%>

HTML:

<select name="CategoriesId" id="ddlCategories">
  <option value="1">Thermage Solta Medical</option>
  <option value="2">Syneron</option>
  <option value="59">Deka</option>
</select>                    
<select name="ModelId" id="ddlModels">
  <option value="1">Thermage NXT RF</option>
  <option value="2">Thermacool TC</option>
</select>

Upvotes: 2

Views: 11623

Answers (2)

Rick Petersen
Rick Petersen

Reputation: 744

This may seem entirely obvious, and I know the question is old, but just in case someone reaches this page with the issue described by the initial poster, there is at least one possible cause that can happen easily when working with inherited code or on a large project.

Check to make sure that the ID of your select element is unique. I know IDs are supposed to be unique but since ASP.NET MVC will create the IDs for you if using the HtmlHelper classes, and because you may have many partials rendered in a single page, the chances of there being duplication is high. In my case I had 2 elements with the same ID, and so when I attached the event to $('#selectID') it was attaching to the first one, not the one I wanted it to.

Upvotes: 4

Bj&#246;rn
Bj&#246;rn

Reputation: 1601

works fine, see here. Are you sure that you don't have any other javascript errors?

Upvotes: 1

Related Questions