javascript - 级联下拉列表(SubLocality)在 asp.net mvc 中不起作用-6ren

javascript - 级联下拉列表(SubLocality)在 asp.net mvc 中不起作用

转载作者：行者123 更新时间：2023-12-01 05:39:36

我有三个下拉列表。城市下拉列表的第一个操作方法是---

            public ActionResult Create()
            {
        List<SelectListItem> li = new List<SelectListItem>();
        li.Add(new SelectListItem { Text = "Select your City", Value = "----" });
        li.Add(new SelectListItem { Text = "Faridabaad", Value = "Faridabaad" });
        li.Add(new SelectListItem { Text = "Greater Noida", Value = "Greater Noida" });
        li.Add(new SelectListItem { Text = "Gurgaon", Value = "Gurgaon" });
        li.Add(new SelectListItem { Text = "Noida", Value = "Noida" });
        li.Add(new SelectListItem { Text = "New Delhi", Value = "New Delhi" });
        ViewData["City"] = li;
        return View();
    }

然后我的“地点”下拉列表的操作方法会随着我们更改城市名称而变化，如下所示------

        public JsonResult LoadLocalities(string id)
    {
        List<SelectListItem> localities = new List<SelectListItem>();
        switch(id)
        {
      case"New Delhi":
         localities.Add(new SelectListItem { Text = "Select your locality", Value = "0" });
                localities.Add(new SelectListItem{ Text ="East Delhi", Value = "1" });
                    localities.Add(new SelectListItem{ Text ="West Delhi", Value = "2" });
                        localities.Add(new SelectListItem{ Text ="North Delhi", Value = "3" });
                        localities.Add(new SelectListItem { Text = "South Delhi", Value = "4" });
                        break;           
        }
        return Json(new SelectList(localities, "Value", "Text"));
    }

最后一个随着地点名称变化而变化的子地点下拉菜单的操作方法是这样的---

      public JsonResult LoadSubLocalities(string id)
       {
        List<SelectListItem> sublocalities = new List<SelectListItem>();
        switch (id)
        {
            case"1":
                sublocalities.Add(new SelectListItem { Text = "Select your sublocality", Value = "0" });
                sublocalities.Add(new SelectListItem { Text = "Region1", Value = "1" });
                sublocalities.Add(new SelectListItem { Text = "Region2", Value = "2" });
                break;
        }
        return Json(new SelectList(sublocalities, "Value", "Text"));
    }

现在查看页面是这样的------

        <!DOCTYPE html>
        <head>
        <title></title>
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>   
 </head>
 <body>
 <div id="map_canvas" style="width: 800px; height: 700px; float:left"></div>
  @using (Html.BeginForm())
  {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Enter the Project Details</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @if (ViewData.ContainsKey("City")){
            @Html.DropDownListFor(model => model.City, ViewData["City"] as List<SelectListItem>, new { style = "width:250px", @class = "DropDown1"})
                    @Html.ValidationMessageFor(model => model.City)
            }
    </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Locality)
        </div>
        <div class="editor-field">
            @Html.DropDownList("Locality", new SelectList(string.Empty,"Value","Text"),"Please Select a locality", new { style = "width:250px", @class = "DropDown1" })
            @Html.ValidationMessageFor(model => model.Locality)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.SubLocality)
        </div>
        <div class="editor-field">
            @Html.DropDownList("SubLocality", new SelectList(string.Empty, "Value", "Text"), "Please Select a sub locality", new { style = "width:250px", @class = "DropDown1" })
            @Html.ValidationMessageFor(model => model.SubLocality)
        </div>
          <p>
            <input type="submit" value="Save Project" />
           </p>
           </fieldset>

现在我的javaScript代码是这样的，我编写了代码从 Controller 获取城市，然后随着城市名称的更改而更改位置，并随着位置名称的更改而更改子位置名称-----

        <script type="text/javascript">        
        $(document).ready(function () {
        $("#City").change(function () {
            $("#Locality").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("LoadLocalities","Project")',
                dataType: 'json',
                data: { id: $("#City").val() },
                success: function (localities) {
                    $.each(localities, function (i, locality) {
                        $("#Locality").append('<option value="' + locality.Value + '">' +
                             locality.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed to retreive Locality.' + ex);
                }
            });
            return false;
        })
                $("#Locality").change(function () {
                $("#SubLocality").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("LoadSubLocalities")',
                    dataType: 'Json',
                    data: { id: $("Locality").val() },
                    success: function (sublocalities) {
                        $.each(sublocalities, function (i, sublocality) {
                            $("#SubLocality").append('<option value="' + sublocality.Value + '">' +
                                 sublocality.Text + '</option>');
                        });
                    },
                    error: function (ex) {
                        alert('Failed to retrieve SubLocality.' + ex);
                    }
                });
                return false;
            })
            });
         </script>
       }

现在，我的问题是，我的地区在更改城市名称时工作正常，但子地区下拉列表不适用于地区名称的更改---

最佳答案

你的原因$("#Locality").change(function () {不起作用是因为以下行

data: { id: $("Locality").val() },

返回undefined 。必须是

data: { id: $("#Locality").val() }, // add hash

但是正确的方法是使用

data: { id: $(this).val() },

为了避免再次遍历DOM来获取 id="Locality" 的元素

您的代码还有许多其他问题，特别是在验证和返回 View if ModelState 方面。无效

生成List<SelectListItem>时，不添加标签选项(即 sublocalities.Add(new SelectListItem { Text = "Select your sublocality", Value = "0" }); )。您正在给标签选项一个值意味着它始终有效。按照目前的情况，您可以以及删除 @Html.ValidationMessageFor()有关联每个下拉菜单。
切勿给出SelectList与您的属性(property)名称相同绑定(bind)到(在您的情况下 City )
在您的LoadLocalities()中和LoadSubLocalities()方法你首先创建List<SelectListItem>然后创建一个新的 SelectList (即 IEnumerable<SelectListItem> )所以它只是不必要的额外开销。无论如何，客户并不知情什么是 C# 类，而您只返回两倍的数据根据需要跨过电线( Selected 、 Disabled 和 Group您从未使用过的属性)。相反，只需传回一个包含 2 个属性的匿名对象的集合(对于选项值和文本)

关于javascript - 级联下拉列表(SubLocality)在 asp.net mvc 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31525823/

文章推荐： perl - 查找多维数组大小

文章推荐： perl - 更改 DBIx 类结果类的继承树？

javascript - 使用 JQuery 的语义 UI 下拉列表 - 如何使用 JQuery 初始化语义 UI 下拉列表
我有一个像这样的数组 var resultsArray = [ { name: "BMW", value: "BMW", text: "BMW" }, { name: "Mercedes-Benz",
jQuery 下拉列表
我正在尝试实现发现的下拉检查列表 here在 ASP.NET ListBox 控件上。它将控件呈现为下拉列表，并应用所有 css。但是，这些选项不是预期的复选框，而是单选按钮。有谁知道为什么当我让它与
Javascript 下拉列表
如何使用 Javascript 在下拉列表的更改事件中获取先前选择的索引。最佳答案不，这是不可能的，但您可以在 onchange 事件中使用一个变量来跟踪之前的选择示例: var previou
javascript - 下拉列表
我想使用一个名为 dropdown-check-list 的插件: http://code.google.com/p/dropdown-check-list/ 但是，它的某些功能似乎与谷歌浏览器不兼容
类似于苹果商店的ios过滤选项(下拉列表)
我正在尝试找出如何制作类似于苹果商店的过滤选项的过滤选项。我首先想到的是类似于网站的下拉列表。但xcode中的对象选项上似乎没有它。想知道我应该从哪里开始才能实现这种功能。和这个类似 http://
CakePHP:下拉列表(外键)
我正在尝试为类别创建一个下拉列表。如果这检查没问题，那么它必须是数据库。型号: 分类 var $hasMany = 'Product'; 产品 var $belongsTo = 'Category'
Python Dash 下拉列表
有六个问题要问用户。如果用户回答了这些问题，我正在尝试制作一个应用程序，该应用程序将确定在右侧使用哪种研究设计的结果。我正在用 python dash 做这个应用程序。我的 Python 代码如下。如
jquery - onchange 下拉列表
我的问题是我所问问题的延续，请参阅链接。 Load Country/State/City 我已经展开以从数据库加载我的下拉列表，我只需要一种方法在我的第一个下拉列表和第二个下拉列表中连接 onchan
Excel 下拉列表 - 根据选择自动填充值
我正在尝试为一家餐厅创建一个内部成本核算电子表格。我重新熟悉了如何创建下拉列表(在本例中用于选择成分)。当有人选择例如从下拉列表中选择“胡萝卜”，我希望其他字段能够使用另一个电子表格中的成本数据自动
javascript - jQuery 下拉列表
JavaScript/jQuery 新手。我在有序列表中显示了一些数据，如下所示 Data 0 Data 1. Da
带有图像的 Javascript 下拉列表
我在其中一个主题上发现了这一点: http://jsfiddle.net/GHzfD/357/我想问一下从下拉列表中选择图像后如何提醒(路径)。 $("body select").msDropDow
Java Swing 下拉列表
我使用 JAVA Swing 创建了一个下拉列表。当我选择“跟踪 RCM 的状态:”时，我想在所选选项旁边创建另一个下拉列表。我应该使用 mouseactionlistener 代替吗？我试图完成类似
Symfony2 表单事件 - 下拉列表
在 Symfony2 网站中，我尝试制作一个包含 2 个(或 3 个)下拉列表的表单，其依赖关系为国家 > 地区 > 城市。该城市是我正在使用表单编辑的元素的字段。这个想法是根据选择来填充列表。我已
jquery - 计算列表元素的数量并创建 "more"下拉列表
我正在尝试创建一个菜单来计算的数量如果列表中的数量超过 5 个，请将其余的移动到下拉列表中。基本上代码如下所示: Item 1 Item 2 Item 3 Item 4 I
jquery - Json 下拉列表
当我点击要安装主题的部门时，当我点击主题时要安装的服务。但当我点击服务时却没有看到问题。我认为对json的描述不准确。你能帮我解决这个问题吗？谢谢。我的 Jquery 代码； /* Select';
jQuery 下拉列表，更改时执行的操作
我有一个包含两个值的下拉列表:Sponsor 和 Social_Worker。我想要做的是，当选择其中一个时，它会显示一个 div 并隐藏另一个 div，如果选择另一个则反之亦然。我设法使用按钮执行此
php ajax 下拉列表
我正在创建 2 个下拉列表，第二个下拉列表基于对第一个下拉列表的选择。从mysql数据库中获取数据索引.php P
javascript - 互斥的选择/下拉列表
我正在尝试使用 JS 创建互斥的下拉菜单。只能从这 4 个操作系统中选择一个:image 当一个被选中时，其他的应该被禁用。 HTML 部分: Re
具有多个选定值的 JavaScript 下拉列表？
首先，我是 java 脚本的新手。我正在开发我的 Web 应用程序，我有一个下拉菜单，其中包含人员列表。使用它我知道如何传递一个人的选定值。但是我如何选择多个值(人名)并将该数据发送到后端实现。是否可
php - Laravel 下拉列表
我正在使用 Laravel 框架，并且有两个下拉列表，它们都从数据库表中读取数据，第一个它从表中读取所有记录并将其填充到选择列表中这是我的代码: {{Form::select

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 级联下拉列表(SubLocality)在 asp.net mvc 中不起作用