Select item in dropdown List and appears in table

Question

I've made two dropdown lists "Company" And "Product".

 

When I select the company, all its products appear in Product Dropdown list.

 

Now I want to do another work. If I select Company and product it will appear on below table list using jquery.

 

I was searching for the solution for last 3 days but can't find it so kindly please help me

 

Controller File

[Authorize][AllowAnonymous]
public ActionResult Details() {
  ViewBag.Companies = db.Companies.ToList();
  return View();
}
private IList < Product > GetProduct(int CompanyId) {
  var data = db.Products.Where(m =>m.CompanyId == CompanyId).ToList();
  return data;
} [AcceptVerbs(HttpVerbs.Get)] public JsonResult LoadProductsByCompanyId(string CompanyId, string cn) {
  Cname = cn;
  var ProductList = this.GetProduct(Convert.ToInt32(CompanyId));
  var ProductsData = ProductList.Select(m =>new SelectListItem() {
    Text = m.ProductName,
    Value = m.ProductId.ToString(),
  });
  return Json(ProductsData, JsonRequestBehavior.AllowGet);
}

View File

<script type="text/javascript">
$(document).ready(function ()
{
$("#dd_Company").change(function ()
{
var CompanyId = $(this).val();
// var d = $("#dd_Company").val($(this).text());
var txt = $("#dd_Company option:selected").text();
$("#span1").text(txt);
$.getJSON("../UserLogin/LoadProductsByCompanyId", { CompanyId: CompanyId, cn: txt },
function (classesData)
{
var select = $("#ddProduct");
select.empty();
select.append($('<option/>', { value: 0, text: "Select a Product" }));
$.each(classesData, function (index, itemData)
{
select.append($('<option/>', { value: itemData.Value, text: itemData.Text }));
});
});
});
});
</script>
<table>
<tr>