asp.net mvc - Change DropDownList data with Javascript -

asp.net mvc - Change DropDownList data with Javascript -

i have page user can select if transaction type inter accounts transfer, or payment.

the model pass in had 2 lists. 1 list of selectlistitem 1 list of selectlistitem

one of lists populated this:

var entities = new entityservice().getentitylistbyportfolio(); foreach (var entity in entities.where(x=>x.entitytypeid == (int)constants.entitytypes.bankaccount)) { model.bankaccounts.add(new selectlistitem { value = entity.id.tostring(cultureinfo.invariantculture), text = entity.description }); }

if user selects 'inter business relationship transfer', need to:

populate dropdowna list accounts, , populate dropdownb same list of accounts

if select "payment", need alter drowdownb list of thirdparty.

is there way, using javascript, alter list sources, client side?

function changedisplay() { var id = $('.cmbtype').val(); if (id == 1) // payment { $('.lstsource'). ---- info model.thirdparties } else { $('.lstsource'). ---- info model.accounts } }

i'd prefer not phone call back, want quick.

you can load options jquery code updated here code

you newton json @ http://json.codeplex.com/

c# code

//you need import newtonsoft.json string jsona = jsonconvert.serializeobject(thirdparties); //pass jsonstring view viewbag viewbag.jsonstringa = jsona; string jsonb = jsonconvert.serializeobject(accounts); //pass jsonstring view viewbag viewbag.jsonstringb = jsonb;

you jsonstring

[{"value":"1","text":"option 1"},{"value":"2","text":"option 2"},{"value":"3","text":"option 3"}]

html code

<button onclick="loadlista();">load a</button> <button onclick="loadlistb();">load b</button> <select name="" id="items"> </select>

javascript code

function option(value,text){ this.val= value; this.text = text; } var lista=[]; var listb=[]; //you have fill lista , listb razor code //@foreach (var item in model.thirdparties) //{ // <text> // lista.push(new option('@item.value', '@item.text')); // </text> // } //@foreach (var item in model.accounts) // { // <text> // lista.push(new option('@item.value', '@item.text'); // </text> // } lista.push(new option(1,"a")); lista.push(new option(2,"b")); lista.push(new option(3,"c")); listb.push(new option(4,"x")); listb.push(new option(5,"y")); listb.push(new option(6,"z")); function loadlista(){ $("#items").empty(); lista.foreach(function(obj) { $('#items').append( $('<option></option>').val(obj.val).html(obj.text) ) }); } function loadlistb(){ $("#items").empty(); listb.foreach(function(obj) { $('#items').append( $('<option></option>').val(obj.val).html(obj.text) ) }); }

new javascript code fpor json

var lista=[]; var listb=[]; var jsonstringa ='[{"val":"1","text":"option 1"},{"val":"2","text":"option 2"},{"value":"3","text":"option 3"}]'; var jsonstringb ='[{"val":"4","text":"option 4"},{"val":"5","text":"option 5"},{"value":"6","text":"option 6"}]'; //you have fill lista , listb razor code //var jsonstringa = '@viewbag.jsonstringa'; //var jsonstringb = '@viewbag.jsonstringb'; lista = json.parse(jsonstringa); listb = json.parse(jsonstringb); function loadlista(){ $("#items").empty(); lista.foreach(function(obj) { $('#items').append( $('<option></option>').val(obj.val).html(obj.text) ) }); } function loadlistb(){ $("#items").empty(); listb.foreach(function(obj) { $('#items').append( $('<option></option>').val(obj.val).html(obj.text) ) }); }

here fiddle http://jsfiddle.net/pratbhoir/tf9m5/1/

see new jsfiddle json http://jsfiddle.net/pratbhoir/tf9m5/3/

javascript asp.net-mvc twitter-bootstrap