Jquery：动态更改 <select> 标记的内容

Question

我正在使用 ASP.Net MVC4 开发一个简单的 Web 应用程序。场景是这样的：

我有 2 个下拉框。第二个的内容取决于从第一个中选择的值。

第一个下拉列表包含一个语言列表：

<div>
    <select id="myParent">
        <option value="English"> English</option>
        <option value="French"> French</option>
        <option value="German"> German</option>
        <option value="Spanish"> Spanish</option>
    </select>
<div>

现在，根据上面下拉列表中选择的值，我有相应语言的消息，必须在第二个下拉列表中填充。

我使用ViewModel 对象从控制器获取这些消息。

下拉的初始种群如下图：

<div>
    <select id="myChild">
         @if(Model.CurrentLang == "English")
         {
              foreach( var item in Model.EnglishMessages)
              {
                      <option value="@item.Value">"@item.Value"</option>
              }
         }
         else if(Model.CurrentLang == "French")
         {
              foreach( var item in Model.FrenchMessages)
              {
                      <option value="@item.Value">"@item.Value"</option>
              }
         }
         else if(Model.CurrentLang == "Spanish")
         {
              foreach( var item in Model.Spanish)
              {
                      <option value="@item.Value">"@item.Value"</option>
              }
         }
         else if(Model.CurrentLang == "German")
         {
              foreach( var item in Model.GermanMessages)
              {
                      <option value="@item.Value">"@item.Value"</option>
              }
         }

    </select>
</div>

在使用上述方法时，我能够在第二个下拉列表中获得正确的项目列表，因为"Model.CurrentLanguage"在页面加载时具有默认语言。

当我从第一个下拉列表中选择了一个新项目时会出现问题，我如何重新填充第二个下拉列表？也就是说，第二个下拉菜单的内容必须根据从第一个下拉菜单中选择的语言动态刷新。

在脚本标签中，我得到了第一个下拉列表的选定值，如下所示：

<script type="text/javascript">
      $(function () {

             $('#myParent').click(function () {
                //Here i'm getting the value i select in the first drop down
                var language= $('#myParent').find(":selected").val();
             });

        });
</script>

我觉得第二个下拉列表的重新填充必须发生在$('#myParent').click。

尝试了一些东西，但似乎没有任何效果。任何人都可以提出相同的解决方案吗？

提前致谢。

Answer 1

伪代码：

$("#myParent").on('change',function(){
      var parentValue=$(this).Val();

      //clear the child 
      $("#myChild").empty();

      //Get select value and call ajax, which populate child dropdown-list
       populateChild(parentValue);

       or call controller model
});


function populateChild(value){

   var jsonData = JSON.stringify({
                    aData: value
                });
     $.ajax({
        type: "POST",
        url: "test/test",
        data: jsonData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        error: OnErrorCall
    });

    function OnSuccess(response){
            var aData=response.d
            // now append aData to your childDropdownlist
    }

    function OnErrorCall(response){ }
}

---

假设您正在返回 JSON 数据

function OnSuccess(response){
    var aData=response.d
    $("#myChild").empty();

    var frag;
    $.each(aData, function (index, item) {
            frag +="<li>"+item.Value+"</li>";
     });

    $("#myChild").append(frag);
}