如何使用JSON填充下拉菜單

Question

我試圖根據另一個下拉列表選擇填充下拉框。

我已經創建了一個示例變量var sampleData = { Default: { value1: "text", value2: "text" }, PTDR:爲了找到第二個下拉列表填充自己一旦用戶選擇第一個下拉似乎工作。但是，我正在嘗試更正我的控制器中的一個方法中的數據，這是我不知道如何執行的。

任何幫助或指導，將不勝感激。

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); 
     } 
    } 


    function drFilter() { 

      var sampleData = { Default: { value1: "text", value2: "text" }, PTDR: { value1: "cal", value2: "cal" }, All: { value1: "lool", value2: "loool" } }; 
      var dataInJSONForm = JSON.stringify(sampleData); 
      var datainJSObjectForm = JSON.parse(dataInJSONForm); 

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



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

<div class="editor-field"> 
       <select id="dd1"> 
        <option value="Default">Default</option> 
        <option value="PTDR">PT/DR</option> 
        <option value="All">All</option> 
       </select> 

<select id="ddl2"> 
        <script> 
         drFilter(); 
        </script> 
       </select> 

Answer 1

您需要創建一個Ajax請求去獲得來自控制器的數據，這樣的事情應該工作，這樣就成功來自控制器的JSON對象傳遞到您的功能，可以用來代替的sampleData的。

$.ajax({ 
    type: "GET", 
    data: {id: 1}, 
    url: @Action.Url("ptdrFilter"), 
    success: function(result) { 
     drFilter(result); 
    } 
});