asp.net - Trying to fill a textbox depending on the selected value on my dropdownlist -

im new asp.net mvc. , ive been searching 2 hours , cant seem it. have dropdownlist of products database. want fill textbox description on realtime depending on selected item on dropdownlist.

here have far:

populate dropdown list

public actionresult index() {         ienumerable<selectlistitem> items = db.products.select(i => new selectlistitem         {             value = i.productname,             text = i.productname         }       );         viewbag.productitems = items;         return view();  } 

my dropdown list

@using (ajax.beginform("getdescriptionbyproductname", "purchaseorder", new ajaxoptions{ insertionmode = insertionmode.replace,updatetargetid = "description"}))         {             @html.dropdownlist("productitems", (selectlist)viewbag.values, new { onchange = "this.form.submit();" })          }  

here actionresult in controller

[httppost] public actionresult getdescriptionbyproductname(string productitems) {     var data = db.products.where(x => x.description.contains(productitems));     return redirecttoaction("index"); } 

this looks like. select item dropdownlist , autofill in textbox description

update: right direct me index page , resets default value blank

from code given snippet, dont think necessary hit server everytime product description. have created fiddle here - https://dotnetfiddle.net/1lyhww

this have done:

created model product - can reuse product model

public class product     {         public int id { get; set; }                  public string display { get; set; }                  public string description { get; set; }     } 

and in action method:

[httpget] public actionresult index() {     var productslist = new list<product>     {     new product{id= 1,display = "product 1", description = "prod 1 description"},     new product{id= 2,display = "product 2", description = "prod 2 description"},     new product{id= 3,display = "product 3", description = "prod 3 description"},     new product{id= 4,display = "product 4", description = "prod 4 description"},     new product{id= 5,display = "product 5", description = "prod 5 description"},             };    viewbag.products = productslist;   return view(); } 

.cshtml

@using (html.beginform())             {                 <select name="drpproducts" id="drpproducts">                 @{                     foreach(var product in viewbag.products)                     {                         <option value="@product.id"                             data-desc="@product.description">                             @product.display                         </option>                     }                 }                 </select>              <input type="text" id="txtproductdescription"/>             }     <script>         $(document).ready(function(){              $("#drpproducts").change(function(){                  var selecteditemdesc = $("#drpproducts option:selected").attr("data-desc");                 $("#txtproductdescription").val(selecteditemdesc);                  });          });     </script> 

note - have used jquery in approach