Selecting Data from DropDown and populating it in table

Question

I have two Dropdown
1.Company
2.Products

When i select the company dropdown its products shows on second dropdown. And when i select one of the product and appears in the table below using jquery.
Now when i select product i want to show quantity and price of related product.
So what should i do?

Sachin Singh · Answer

$( "#ddProduct" ).change(function () { var pid=$( this ).val(); var model={ productID:pid }; $.ajax({ type: "post" , url: "/ControllerName/GetProductById" , dataType: "json" , contentType: "application/json;charset=utf-8" , data: JSON.stringify(model), cache: false , success:function(data){ var trr = document.createElement( "tr" ); $(trr).append( " " + $( "#dd_Company option:selected" ).text() + " " ). append( " " + data.Name + " " ). append( " " + data.Quantity + " " ). append( " " + data.Price + " " ) ; $( "#YourTable" ).append(trr); } }) }); public Product GetProductById( string productID) { int pid= Convert.ToInt32(productID); var product= yourContext.Products.where(x=>x.ProductId==pid).singleOrDefault(); return Json(product,JsonRequestBehavior.AllowGet); } please use this updated code.

Mageshwaran R · Answer

Hi Hamza, please try this code, HTML: select id = "typeOfGlass" > option value = "15" > Standard/Annealed Glass Width option > option value = "20" > Tempered Glass Width option > select > br > Glass Width br > select id = "glassWidth" > option value = "19" > 19 option > option value = "20" > 20 option > option value = "21" > 21 option > select > JQuery: $( '#typeOfGlass' ).on( 'change' , function (){ console.log($( '#typeOfGlass' ).val()); $( '#glassWidth' ).html( '' ); if ($( '#typeOfGlass' ).val()==15){ $( '#glassWidth' ).append( ' 19 ' ); $( '#glassWidth' ).append( ' 20 ' ); $( '#glassWidth' ).append( ' 21 ' ); } else { $( '#glassWidth' ).append( ' 6 ' ); $( '#glassWidth' ).append( ' 7 ' ); $( '#glassWidth' ).append( ' 8 ' ); $( '#glassWidth' ).append( ' 9 ' ); } });

Selecting Data from DropDown and populating it in table

Answers (2)