asp.net mvc - Mvc, Jquery, Chosen. Dependent Dropwdowns -

asp.net mvc - Mvc, Jquery, Chosen. Dependent Dropwdowns -

help solve problem: in mvc project, have 2 checked dropdown lists (dropdown checkboxes) need do: after selecting item in first dropdown list, secon filtered (better filled) according selected item in first.

i got filtered info getjson, can not refresh dropdown.

here code:

(there similar question, did not foud solution here how add together multiple dependent dropwdowns--chosen gem)

@html.dropdownlist("divisionids", (ienumerable<selectlistitem>)viewbag.divisionlist, null, new { multiple = "multiple", @class = "multiselect" }) <script type="text/javascript"> //$("#divisionids").multipleselect() $("#divisionids").chosen() $("#divisionids").on('change', function (e) { //alert($("#divisionids").val()); var val = $("#divisionids").val(); var subitems = ""; //alert(val); $.getjson("/home/getfilteredpostinggroups/" + val, null, function (data) { $.each(data, function (index, item) { subitems += "<option value='" + item.value + "'>" + item.text + "</option>" }); alert(subitems); //here... $("#postinggroupids").empty(); $("#postinggroupids").append(subitems); $("#postinggroupids").trigger("chosen:updated"); $("#postinggroupids").change(); }); }); </script> </td> <td> </td> </tr> <tr> <td> </td> <td> @*@html.dropdownlist("postinggroup")*@ @html.dropdownlist("postinggroupids", (ienumerable<selectlistitem>)viewbag.postinggrouplist, null, new { multiple = "multiple", @class = "multiselect" }) <script type="text/javascript"> $("#postinggroupids").chosen() </script> </td> <td> <input type="submit" name="command" value="@command.viewing" /> </td> </tr>

what wrong? or how in other way, maybe other controls?

thanks!

chosen jquery-plug-in good. i'm glad working fiddle example helped prepare issue.

as per comments you've realized working after moving script block dom-ready handler function body. , asked want know more it.

here description: case domcontentloaded/jquery-dom-ready event-handler right place. can run immediate executable script code on window load event-handler well.

here should understand 1 thing jquery , plug-ins: $(=jquery) or plug-ins or relevant html elements wont ready until document-ready event fires, must maintain javascript code in ready handler body block below needs run after rendering html

<script> $(document).ready(function(){ //your immediate executable js code should here }); //or below shortcut syntax $(function(){ //your immediate executable js code should here }); </script>

why should set javascript in domcontentloaded event handler(i.e., jquery's document-ready event-handler block run/executes in html script fragment?

the domcontentloaded event fired when document has been loaded , parsed, without waiting stylesheets, images, , subframes finish loading (the load event can used observe fully-loaded page).

here sample script plain html mozilla dev docs

<script> document.addeventlistener("domcontentloaded", function(event) { console.log("dom loaded , parsed"); }); </script>

$(handler) jquery's method observe above content loading state here description jquery learning docs: page can't manipulated safely until document ready. jquery detects state of readiness you. code included within $( document ).ready() run 1 time page document object model (dom) ready javascript code execute. code included within $( window ).load(function() { ... }) run 1 time entire page (images or iframes), not dom, ready.

jquery asp.net-mvc model-view-controller