jquery - Changing DropDownListFor Data in MVC4 with Bootstrap Styling Enabled -
i have partial view in mvc has 2 razor dropdownlistfor's on it.
@html.dropdownlistfor(model => model.customerid, new selectlist(model.customerlist, "id", "name", @model.customerid), new { @class = "bs-select form-control input-large", data_style = "btn-primary", id = "ddlcustomer", onchange = "reloadddl()" }) and:
@html.dropdownlistfor(model => model.branchid, new selectlist(model.branchlist, "id", "description", @model.branchid), new { @class = "bs-select form-control input-large", data_style = "btn-primary", id = "ddlbranch" }) when first dropdownlist selection changes, second dropdown loads in new set of options. example, if customer dropdown has "a" selected, branch dropdown have "1", "2", "3" available selection. if change customer dropdown selection "b", branch dropdown changes "4", "5", "6". being achieved through ajax call controller using following code:
function reloadddl(){ var customerid = $("#ddlcustomer").val(); $.ajax({ url: '/adjuster/refreshaddeditview', data: { customerid: customerid }, method: 'post', success: function (result){ var myselect = $('#ddlbranch'); myselect.find('option').remove().end(); for(var = 0; i<result.branchlist.length;i++){ myselect.append( $('<option></option>').val(result.branchlist[i]["id"]).html(result.branchlist[i]["description"]) ); } } }); } the issue running razor dropdown normal select tag options inside of it:
<select class="bs-select form-control input-large" data-style="btn-primary" data-val="true" data-val-number="the field branchid must number." data-val-required="the branchid field required." id="ddlbranch" name="branchid"> but when bootstrap javascript
componentsdropdowns.init(); is applied, turns button span , unordered list.
if knows solution either changing how repopulating dropdownlist, or how work around bootstrap, appreciate help.
you can use simple jquery instead of making ajax call like
$("#fotype").change(function () { if ($('#fotype').find(":selected").val() == 1) { $("#wd option[value='1']").show(); $("#wd option[value='2']").hide(); $("#wd option[value='3']").show(); $("#wd option[value='4']").show(); $("#wd option[value='5']").hide(); $("#wd option[value='6']").show(); }
Comments
Post a Comment