Question

我正在使用ASP.Net MVC4开发一个简单的Web应用程序。场景是这样的：我有2个下拉框。第二个的内容取决于从第一个中选择的值。第一个下拉列表包含语言列表：＆LT; DIV＆GT; ＆lt; select id =“myParent”＆gt; ＆lt; option value =“English”＆gt;英语＆LT; /选项＆GT; ＆lt; option value =“French”＆gt;法语和LT; /选项＆GT; ＆lt; option value =“German”＆gt;德语＆LT; /选项＆GT; ＆lt; option value =“Spanish”＆gt;西班牙语＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; DIV＆GT; 现在，根据在上面的下拉列表中选择的值，我有相应语言的消息，必须在第二个下拉列表中填充。我正在使用ViewModel对象从控制器获取这些消息。下拉列表的初始填充如下所示：＆LT; DIV＆GT; ＆lt; select id =“myChild”＆gt; @if（Model.CurrentLang ==“英语”） { foreach（Model.EnglishMessages中的var项） { ＆lt; option value =“@ item.Value”＆gt;“@ item.Value”＆lt; / option＆gt; } } 否则if（Model.CurrentLang ==“French”） { foreach（Model.FrenchMessages中的var项） { ＆lt; option value =“@ item.Value”＆gt;“@ item.Value”＆lt; / option＆gt; } } 否则if（Model.CurrentLang ==“西班牙语”） { foreach（Model.Spanish中的var项） { ＆lt; option value =“@ item.Value”＆gt;“@ item.Value”＆lt; / option＆gt; } } 否则if（Model.CurrentLang ==“German”） { foreach（Model.GermanMessages中的var项） { ＆lt; option value =“@ item.Value”＆gt;“@ item.Value”＆lt; / option＆gt; } } ＆LT; /选择＆GT; ＆LT; / DIV＆GT; 在使用上述方法时，我能够在第二个下拉列表中获得正确的项目列表，因为“Model.CurrentLanguage”在页面加载时具有默认语言。当我从第一个下拉列表中选择一个新项目时，会出现问题，如何重新填充第二个下拉列表？也就是说，必须根据从第一个下拉列表中选择的语言动态刷新第二个下拉列表的内容。在脚本标记中，我得到第一个下拉列表的选定值，如下所示：＆lt; script type =“text / javascript”＆gt; $（function（）{ $（'＃myParent'）。click（function（）{ //这里我得到的是我在第一个下拉列表中选择的值 var language = $（'＃myParent'）。find（“：selected”）。val（）; }）; }）; ＆LT; /脚本＆GT; 我觉得第二次下拉的重新播放必须在$（'＃myParent'）中进行。点击。尝试了一些东西，但似乎没有任何工作。任何人都可以提出相同的解决方案吗？提前致谢。

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

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

1 个答案: