ASP .NET DropDownList多级联动事件

ASP .NET DropDownList多级联动事件思路假如有三级省、市、区,先加载出所有省选择省之后,加载出该省所有市选择市之后,加载出该市所有区重新选择省,则清空市和区重新选择市,则清空区想好数据结构,不同的数据结构做法不同例子数据结构publicclassArea{publicintPKID{get;set;}publicintParentID{get;set;}…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

思路

假如有三级省、市、区,先加载出所有省
选择省之后,加载出该省所有市
选择市之后,加载出该市所有区
重新选择省,则清空市和区
重新选择市,则清空区
想好数据结构,不同的数据结构做法不同

例子

数据结构

public class Area
{
    public int PKID { get; set; }
    public int ParentID { get; set; }
    public string Name { get; set; }
}

测试数据

 
ASP .NET DropDownList多级联动事件

1

前台

<div>
    <span>地区搜索:</span>@Html.DropDownList("Provinces", new SelectList(ViewBag.Province as System.Collections.IEnumerable, "PKID", "Name"), "请选择")
    &nbsp;&nbsp;&nbsp;&nbsp;
    <select id="Citys">
        <option value="">请选择</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <select id="Districts">
        <option value="">请选择</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="GetResult()">获取当前选择</button>
</div>
<script>
    $("#Provinces").change(function () {
        var self = $(this);
        var parentId = self.val();
        if (parentId != "") {
            $("#Province").val(self.find("option:selected").val());
            var option = GetRegion(parentId);
            $("#Citys").html(option);
            $("#Districts").html("<option value=''>请选择</option>");
        } else {
            $("#Citys").html("<option value=''>请选择</option>");
            $("#Districts").html("<option value=''>请选择</option>");
        }
    });
    $("#Citys").change(function () {
        var self = $(this);
        var parentId = self.val();
        if (parentId != "") {
            $("#City").val(self.find("option:selected").val());
            $("#RegionID").val(parentId);
            var option = GetRegion(parentId);
            $("#Districts").html(option);
        } else {
            $("#Districts").html("<option value=''>请选择</option>");
        }
    });
    function GetRegion(ParentID) {
        var option = "<option value=''>请选择</option>";
        $.ajax({
            type: "get",
            url: "/AboutDB/GetArea",
            data: { "ParentID": ParentID },
            async: false,
            success: function (city) {
                //拼接下拉框
                $.each(city, function (index, item) {
                    option += "<option value=" + item.PKID + ">" + item.Name + "</option>";
                });
            }
        });
        //返回下拉框html
        return option;
    }
    function GetResult()
    {
        var Province = $("#Provinces").find("option:selected").text();
        var City = $("#Citys").find("option:selected").text();
        var District = $("#Districts").find("option:selected").text();
        layer.alert(Province + "-" + City + "-" + District);
    }
</script>

后台

//加载页面,先查出省列表
public ActionResult Area()
{
    ViewBag.Province = new AboutDBManager().GetArea(0);
    return View();
}
//根据ParentID查询子集
public ActionResult GetArea(int ParentID)
{
    var regions = new AboutDBManager().GetArea(ParentID);
    return Json(regions, JsonRequestBehavior.AllowGet);
}
public List<Area> GetArea(int ParentID)
{
    string sql =string.Format("select PKID,ParentID,Name from area where ParentID={0}",ParentID);
    return DAL.DbManager<Area>.Instance.QueryBySQL(sql).ToList();
}

转载于:https://www.cnblogs.com/Lulus/p/7873285.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/195010.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • C++写一个CSGO开箱模拟器「建议收藏」

    C++写一个CSGO开箱模拟器「建议收藏」head玩过csgo的人类都知道,开箱是很有趣的。————名人名言Appstore上有专门的开箱模拟器,但是啊,他有广告。(;′⌒`)所以心善的博主决定自己用C++手撸一款开箱模拟器:3A大作,有整整一种箱子可供选择附加开箱动画,效果及其逼真…

    2022年9月28日
    2
  • Java序列化和反序列化

    Java序列化和反序列化

    2021年6月7日
    76
  • word怎么把编号变成文本格式_word字离序号特别远

    word怎么把编号变成文本格式_word字离序号特别远记录一下word如何去掉自动编号格式但保留原编号内容的方法:1.调出word的“开发工具”选项打开文件->选项->自定义功能区->选中开发工具->确定,2.编写宏依次点击:开发工具-宏-在“宏名”框内输入宏名(如:NumToTxt)-单击“创建”按钮,弹出VisualBasic编辑器窗口,窗口内自动出现以下内容把下面的这段代码复制下来:ActiveDocument.Content.ListFormat.ConvertNumbersToText粘.

    2025年6月2日
    2
  • 启动mysql的命令 linux命令,linux如何启动mysql服务 linux启动mysql服务命令是什么(图文)…

    启动mysql的命令 linux命令,linux如何启动mysql服务 linux启动mysql服务命令是什么(图文)…mysql 数据库是一种开放源代码的关系型数据库管理系统 有很多朋友都在使用 一些在 linux 系统上安装了 mysql 数据库的朋友 却不知道该如何对 mysql 数据库进行配置 那么 linux 该如何启动 mysql 服务呢 接下来小编就给大家带来 linux 启动 mysql 服务的命令教程 R1d 电脑 数码 手机应用问题解决的 IT 技术网站 seo 云狐网具体步骤如下 R1d 电脑 数码 手机应用问题解决的 IT 技术网

    2025年8月31日
    0
  • 知识图谱构建技术_知识图谱网站

    知识图谱构建技术_知识图谱网站知识图谱helloworld

    2022年9月28日
    2
  • vuex-mapGetters使用案例解析

    vuex-mapGetters使用案例解析store/index.jsimportVuefrom’vue’importVuexfrom’vuex’Vue.use(Vuex)exportdefaultnewVuex.Store({state:{msg:”HelloVuex!”,name:”cxj”,age:18,hobby:”美女”},getters:{tenYearsOld(state){returnstate.age+1

    2022年5月5日
    61

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号