Javascript ASP.NET MVC4和Razor-按从另一个dropdownlist中选择的值筛选dropdownlist

我必须根据从另一个下拉列表中选择的值过滤下拉列表的选项。在我的数据库中，我有一个包含所有国家的表，还有一个包含世界上所有城市的表，其中FK指向各个国家

以下是我的视图和我的页面的一部分：

以及我的控制器方法（页面的GET方法、所有国家/地区的加载和一个国家/地区所有城市的加载）：（我删除了图像）

我必须处理第一个dropdownlist的“onchange”事件来修改第二个dropdownlist的所有选项（在我的控制器中调用LoadCities方法并传递第一个drop的所选项的值），但我不知道如何做

谢谢你的帮助

乌德帕德 谢谢@Shyju的建议，但它仍然不起作用。我是一名学生，对该主题了解不多，以下是结果： 您可以看到内容长度是0，实际上响应面板是空的。

---

为什么类型是xml？什么是“X-With”？如何修复它？

使用第一个选择的onchange方法（客户端）并使用AJAX调用填充秒选项。

您可以在第一个下拉列表（国家）上侦听更改事件，读取所选选项的值，并向服务器发出AJAX调用，以获取该国家的城市

$(function(){

  $("#Country").change(function(){

     var countryId = $(this).val();
     var url = "@Url.Action("LoadCities,"Country")"+countryId;

     $.getJSON(url,function(data){

         var options="";
         $.each(data,function(a,b){
           options+="<option value='"+ b.Value +"'>" + b.Text + "</option>";
         });        
         $("#City").html(options);
     });

  });

});

---

使用javascript或jquery OnChange方法。 并传递第一个下拉Id，使用ajax通过传递下拉Id来调用该方法

<div class="ui-widget">
        <select id="pick">
            <option value="">Select one...</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>

        <select id="drop">
            <option value="">Select one...</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
        </select>
    </div>

$("#drop").change(function () {
        var end = this.value;
        var firstDropVal = $('#pick').val();
    });

选择一个。。。
1.
2.
3.
4.
选择一个。。。
11
12
13
14
$（“#drop”）.change（函数（）{
var end=该值；
var firstDropVal=$（'#pick'）.val（）；
});

欢迎来到StackOverflow！请不要将代码（或其他相关文本）作为图像发布，它应该在您的问题中复制/粘贴并格式化为代码。搜索MVC级联DropDownlist我修改了jQuery代码如下：。。。var url=“@url.Action（“GetCities”、“Account”）”；$。getJSON（url，{“id”：countryId}，函数（数据）…..我还尝试了您的版本（我修复了一些语法错误）：…var url=“@url.Action（“LoadCities”，“Account”）/”+countryId；$.getJSON（url，函数（数据）…..使用FireBug，我看到请求找到了源代码（返回200 OK）但是在respose中，内容长度是0，页面中的任何内容都会发生变化（它不起作用）。我还看到，在jQuery代码中使用FireBug和断点，执行器在getJSON（…）处命中了断点行，但他没有进入函数就立即跳出。至少，我注意到我的控制器中我的ActionResult方法中的断点没有被击中。感谢您的有用建议！检查您的浏览器网络选项卡以查看您的代码是否正在进行ajax调用。放置

console.log（数据）

在getJSON回调方法中，查看结果。有没有示例来演示您的建议？

<div class="ui-widget">
        <select id="pick">
            <option value="">Select one...</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>

        <select id="drop">
            <option value="">Select one...</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
        </select>
    </div>

$("#drop").change(function () {
        var end = this.value;
        var firstDropVal = $('#pick').val();
    });