2016-09-14 119 views
0

當談到JavaScript(Json)時,我是一個初學者。我試圖根據另一個下拉列表的選擇填充下拉框。如下圖所示,我試圖根據「產品模板」下拉菜單填充「規則選擇」下拉菜單。嘗試的代碼也可用。在Mvc視圖中使用JSON數據填充下拉菜單

任何幫助,將不勝感激。

謝謝

function drFilter() 
{ 
    var productTemp = $('#ddlProdTemp :selected').val(); 
    $.getJSON('ptdrFilter', { productTemplate: productTemp }, function (result) { 
     var ddl = $('#ddl2'); 
     var length = result.length; 
     ddl.empty(); 
     if (length > 0) { 

      $(document.createElement('option')) 
      .attr('value', 0) 
      .text("-- Please Select --") 
      .appendTo(ddl); 
     } 

     $(result).each(function (will) { 
      // 
      $(document.createElement('option')) 
       .attr('value', result[will]) 
       .text(result[will]) 
       .appendTo(ddl); 
     }); 
    }); 
} 


public ActionResult ptdrFilter(int id) 
    { 
     IUnitOfWork uow = DataAccess.GetUnitOfWork(); 
     using (ManageProductTemplate ptLogic = new ManageProductTemplate(ref uow)) 
     { 
      List<ProductTemplate> currentpt = ptLogic.GetBy(x => x.ProductTemplateID == id); 
      List<string> pt = new List<string>(); 
      foreach (var item in currentpt) 
      { 
       pt.Add(item.DistributionRule.Name); 

      } 
      return Json(pt); 
     } 
    } 

enter image description here

+0

顯示你的結果包括,執行console.log(結果);並檢查您的控制檯,然後我將能夠給你一些幫助:) –

+0

我已經添加了該方法,但是控制檯沒有出現在任何地方我也更新了控制器的代碼,如果這可以幫助 – user5813072

回答

0
<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script> 
</head> 
<body> 

    <select id="main"> 
     <option value="a">A</option> 
     <option value="b">B</option> 
    </select> 

    <select id="subselect"></select> 

    <script> 
     var sampleData = { a: { value1: "text 1 in a", value2: "text 2 in a" }, b: { value1: "text 1 in b", value2: "text 2 in b" } }; 
     var dataInJSONForm = JSON.stringify(sampleData); 
     var datainJSObjectForm = JSON.parse(dataInJSONForm); 

     $('#main').on('change', function (e) { 
      var valueChosenInMain = $(this).val(); 
      var options = datainJSObjectForm[valueChosenInMain]; 

      var $subselect = $('#subselect'); 
      $subselect.children().detach(); 
      for (var property in options) { 
       $subselect.append($('<option>', { value: property, text: options[property] })); 
      } 
     }); 
    </script> 
</body> 
</html>