Question

jquery change function on dropdown is not working at my application and working at jfFiddle
Application code

<select id="title" name="title"><option value="">-select-</option>
  <option value="Mr">Mr.</option>
  <option value="Mrs">Mrs.</option>
  <option value="Miss">Miss.</option>
  <option value="Other">Other</option>
  </select>

Script

<script type="text/javascript">

$(document).ready(function () {

    $("#title").change(function () {
        var value = $("#title").val();
        alert(value);
    });
});

Why?

Is there anything i am doing wrong???

Answer 1

Try specifying a class for your dropdown:

@Html.DropDownListFor(
    model => model.title, 
    new[] { 
        new SelectListItem { Text = "Mr", Value = "Mr" }, 
        new SelectListItem { Text = "Mrs", Value = "Mrs" }, 
        new SelectListItem { Text = "Miss", Value = "Miss" }, 
        new SelectListItem { Text = "Other", Value = "Other" } 
    }, 
    "-select-",
    new { @class = "myddl" }
)

and then perform a class selector instead of an id selector:

$(document).ready(function () {
    $('.myddl').change(function () {
        // use $(this) to get the currently changed dropdown list here
        // instead of performing yet another selector
        var value = $(this).val();
        alert(value);
    });
});

I suspect that you have multiple dropdown lists with the same id (in a <table> or something) which is invalid HTML.