jQuery drop down list change event not fire

Question

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>

check this in firefox for any errors that it might be throwing — iamserious
– iamserious, Commented Apr 14, 2011 at 10:31
the code, as is, is fine and should work but there might be other factors affecting this code — iamserious
– iamserious, Commented Apr 14, 2011 at 10:44
My sample blogs.msdn.com/b/rickandy/archive/2012/01/09/… does this. See also asp.net/mvc/tutorials/javascript/… — RickAndMSFT
– RickAndMSFT, Commented Mar 31, 2012 at 18:51

Rick Petersen · Accepted Answer · 2012-03-30 18:34:30Z

4

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.

answered Mar 30, 2012 at 18:34

Rick Petersen

7445 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Björn · Accepted Answer · 2011-04-14 10:25:51Z

1

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

answered Apr 14, 2011 at 10:25

Björn

1,6011 gold badge15 silver badges28 bronze badges

Collectives™ on Stack Overflow

jQuery drop down list change event not fire

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related