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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • [Java web]– spring3(2)「建议收藏」

    [Java web]– spring3(2)「建议收藏」1.复杂对象的创建:不能直接new的对象,需要一个相对复杂的创建过程。  :FactoryBean===============================================================================================2.复杂对象的创建流程:  2.1 定义类:implements FactoryBean&l…

    2025年9月29日
    4
  • 数组splice方法的使用「建议收藏」

    数组splice方法的使用「建议收藏」数组splice方法是通过删除、替换现有元素、添加新的元素来修改数组的!

    2022年9月16日
    2
  • freemarker生成java代码_freemarker生成word文档

    freemarker生成java代码_freemarker生成word文档java用freemarker生成word文档.    步骤如下:1,新建一个word文档,另存为test.xml格式的.2,新建java类.(使用freemarker-2.3.10.jar包.请自行下载.)3,把里面需要替换的换成${name}这种. 对应语法参考freemarkerapi.包结构如下:java类:packa

    2022年10月10日
    3
  • idea打包部署

    idea打包部署idea打包部署1、准备工作导入依赖<build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spr…

    2022年6月16日
    99
  • matlab 计算变异系数,变异系数法求权重matlab代码

    matlab 计算变异系数,变异系数法求权重matlab代码《变异系数法求权重matlab代码》由会员分享,可在线阅读,更多相关《变异系数法求权重matlab代码(1页珍藏版)》请在读根文库上搜索。1、变异系数法求权重matlab代码clear;clc;data1,header1=xlsread(statistic1.xlsx,ECO);%必须将statistic.xlsx至于默认文件下,或者给出完整路径data2,header2=xl…

    2022年4月28日
    116
  • python机器学习库xgboost——xgboost算法

    python机器学习库xgboost——xgboost算法全栈工程师开发手册(作者:栾鹏)python数据挖掘系列教程安装xgboost目前还不能pip在线安装,所以先在网址https://www.lfd.uci.edu/~gohlke/pythonlibs/#xgboost中下载whl文件,然后参考https://blog.csdn.net/luanpeng825485697/article/details/7781…

    2022年4月29日
    41

发表回复

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

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