jquery - Dynamically add choices to pulldown MVC Razor -

jquery - Dynamically add choices to pulldown MVC Razor -

i have code in homecontroller should homecoming lastly 6 rows.

private list<selectlistitem> getoriginalids(string thispws) { list<selectlistitem> list = new list<selectlistitem>(); var cat = (from c in _db.dws_bactibucket.orderbydescending(x => x.sampdate) c.pws == thispws && c.samptype == "r" && c.istotpresent == "1" select c).take(6).toarray(); (int = 0; < cat.length; i++) { list.add(new selectlistitem { text = cat[i].labsampid + " (" + cat[i].sampdate + ")", value = cat[i].labsampid.tostring() }); } homecoming list }

i want run code populate 2nd pulldown based on selected in 1st pulldown(i'll bet you've never heard of 1 before).

here 1st pulldown on add together view:

<div class="editor-field"> @{ var listitems = new list<selectlistitem>(); listitems.add(new selectlistitem{text="", value=""}); listitems.add(new selectlistitem{text="r", value="r"}); listitems.add(new selectlistitem{text="p", value="p"}); listitems.add(new selectlistitem{text="c", value="c"}); listitems.add(new selectlistitem{text="t", value="t"}); listitems.add(new selectlistitem{text="a", value="a"}); listitems.add(new selectlistitem{text="s", value="s"}); } @html.dropdownlistfor(m=>m.samptype, listitems) </div>

this shows fine , dandy. here sec pulldown:

<div class="editor-field"> @html.dropdownlistfor(model => model.origsampid(ienumerable<selectlistitem>)viewbag.originals) }) </div>

the goal populate 2nd 1 using json , or jquery cannot wrap head around code syntax calling controller , filling 2nd pulldown. examples have not helped me.

so if have html:

<select id="drop1"> <option value="r">r</option> <option value="p">p</option> <option value="c">c</option> <option value="t">t</option> </select> <select id="drop2"> </select>

you utilize jquery hear action of selecting option

$('#drop1').change(function(){ $.get('getdata', {value : $(this.val())}, function(json){ var html = '' $(json).each(function() { html += '<option value="' + $(this).value +'">' + $(this).text + ' '</option>' }) $('#drop2').empty().append(html) //empty first append remove previous elements }) });

you have method in controller phone call getdata this

[httpget] public actionresult getdata(char val) { //turn elements json result homecoming json( elements); }

note: homecoming partial end have html constructed , append dropdown, find simpler create options in js rather having create in end.

jquery asp.net-mvc json asp.net-mvc-4 razor