Html下拉菜單 - 調用函數來生成列表上的選項

-1

我有一個用C＃編寫的web應用程序，它帶有一個我正在更新的html前端。有一個表單有兩個下拉選擇。Html下拉菜單 - 調用函數來生成列表上的選項

第一個下拉需要調用C＃函數並用結果填充它的選項（一個IEnumerable，但我可以改變，如果有必要）

當選擇了第一個下拉列表，我需要它來觸發功能在第二個下拉菜單中，將第一個框的選定選項作爲參數，然後再將結果填充到自身中。所以如果我的東西是關於汽車的話，它會在加載表單時獲得所有從函數中獲得的列表（它必須是函數，而不是db，這不是我的東西）可以改變），當你選擇一個品牌時，它就會用它作爲參數來填充所有與第二個品牌相關的汽車模型。

所以我的問題是 - 我怎麼能做到這一點的HTML表單

來源

2015-11-04 Aniaas

情況下，像這樣通過填充使用JavaScript和Web服務asnychronously的選擇來實現的。所以你的C＃應用程序不會直接填充任何這些選擇，而是簡單地調用視圖。然後觸發一個JS-AJAX操作來填充第一個選擇。然後，您可以聽取此控件的select-change-event以再次填充下一個控件。

此主題太籠統，無法發佈簡單的答案。你應該看看jQuery Ajax的起點。

來源

2015-11-04 12:00:27 sprinter252

這個例子使用MVC，但我認爲它可以用相同的方式沒有MVC。

使用JavaScript的功能是獲取所需的列表，清除列表，然後用foreach循環的每個項目添加到列表中例如：

我的選擇元素（科德和CODC）：

<div class="row" id="listD"> 
        <div class="col-md-6"> 
         <div class="input-group"> 
          <span class="input-group-addon" style="min-width: 85px;">Distrito</span> 
          <select class="form-control" id="codD" name="DD"> 
          </select> 
         </div> 
        </div> 
       </div> 
       <br id="brD" /> 
       <div class="row" id="listC"> 
        <div class="col-md-6"> 
         <div class="input-group"> 
          <span class="input-group-addon" style="min-width: 85px;">Concelho</span> 
          <select class="form-control" id="codC" name="CC"> 
          </select> 
         </div> 
        </div> 
       </div>

現在改變CODC

功能

function ChangeConcelhos(dist) { 
     $.getJSON("@Url.Action("MudarConcelho", "Tabelas")", { distrito: dist }, 
      function (fooList) { 
       $("#codC").empty(); 
       if (fooList.length > 0) { 
        $.each(fooList, function (i, foo) { 
         $("#codC").append("<option value=" + foo.CC + ">" + foo.Desig + "</option>"); 
        }); 
       } 
      }); 
    }

不要忘記添加科德

0123的情況下改變

(function() { 
    $("#codD").change(function() {ChangeConcelhos($("#codD").val())}); 
})();

來源

2015-11-04 12:05:48

一個onChange事件添加到您希望從中獲取價值組合：onChange="load_cascaded_combo(this.value)" 這裏是jQuery的：

function load_cascaded_combo(val) { 

        var ddl = $('#drops'); // this is the box you want to load 
        ddl.empty(); // clear current content 
        var project = document.getElementById("select1");// this is the combo you get value from 
        var stringArray = new Array(); 
        stringArray[0] = project.value; 
        var postData = { values: stringArray };      
        $.ajax({ 
         type: "GET", 
         url: "/SomeControler/SomeMethod", 
         data: postData, 
         success: function (data) { 
           var i = 0; 
           $.each(data.Result, function() { 
            ddl.append(
            "<option value='" + data.Result[i] + "'>" + data.Result[i] + "</option>" 
            ); 
            i++; 
           });       
         }, 
         dataType: "json", 
         traditional: true 
        }); 
       }    
      };

來源

2015-11-04 12:06:33 Gnqz

Html下拉菜單 - 調用函數來生成列表上的選項

回答

相關問題