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下拉菜单 - 调用函数来生成列表上的选项

回答

相关问题