javascript - Not getting onchange event of dynamicly added dropdown in mvc3 -
i have 3 dropdownlists.
$(document).ready(function () { $("#dropdownlist1").change(function () { $("#id1").val($(this).val()); $("#name1").val($("#dropdownlist1 option:selected").text()); $('#div1').load('/account/dropdown2/?id1=' + $("#id1").val()); }); $("#dropdownlist2").change(function () { $("#routeid").val($(this).val()); $("#routename").val($("#routedropdownlist option:selected").text()); $('#div2').load('/account/dropdown3/?id2=' + $("#routeid").val()); }); $("#dropdownlist3").change(function () { $("#id3").val($(this).val()); $("#name3").val($("#dropdownlist3 option:selected").text()); }); });
in dropdownlist2 , dropdownlist3 added dynamicly.the problem dynamicly added dropdowns not got registered in page .so not getting selected value onchange event.i added these controls partial view. controller.
public actionresult dropdownlist2 (string id1) { list<emp> emplist = new list<emp>(); emp em= new emp () { id = "1", name = "doac" }; emplist .add(em); viewbag.dropdownlist2= new selectlist(emplist , "id", "name"); return partialview(); }
generated html
<script type="text/javascript"> $('#createsubscriber').removeclass('menuholderli').addclass('selectedmenu'); $(document).ready(function () { $("#dropdownlist").change(function () { $("#organization_id").val($(this).val()); $("#organization_name").val($("#dropdownlist option:selected").text()); $('#routediv').load('/account/routedropdown/?organizationid=' + $("#organization_id").val()); }); $(document).on('change', "#routedropdownlist", function () { alert("hi"); $("#routeid").val($(this).val()); $("#routename").val($("#routedropdownlist option:selected").text()); $('#locationdiv').load('/account/locationdropdown/?routeid=' + $("#routeid").val()); }); $("#locationdropdownlist").change(function () { $("#locationid").val($(this).val()); $("#locationname").val($("#locationdropdownlist option:selected").text()); }); }); </script> <p class="message-info"> passwords required minimum of 6 characters in length. </p> <script src="/scripts/jquery.validate.min.js"></script> <script src="/scripts/jquery.validate.unobtrusive.min.js"></script> <form action="/account/register" method="post"> <fieldset> <legend>registration form</legend> <ol> <li> <label for="organization_name">name</label> <input id="organization_id" name="organization.id" type="hidden" value="" /> <input id="organization_name" name="organization.name" type="hidden" value="" /> <select id="dropdownlist" name="dropdownlist"><option value="">---select---</option> <option value="516c0a18c891870f107aa74a">choice school</option> <option value="516d277bc8918701a44c131e">new org</option> <option value="516d1f492e6bba07dc245cc7">olive</option> </select> <span class="field-validation-valid" data-valmsg-for="organization.name" data-valmsg-replace="true"></span> </li> </ol> <div id="routediv"></div> <div id="locationdiv"></div>
use jquery .on()
$(document).on('change', "#dropdownlist2", function(){your code})
repeat dropdown 3
Comments
Post a Comment