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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java多线程并发编程_java线程实现的三种方式

    java多线程并发编程_java线程实现的三种方式Java并发编程:Java创建线程的三种方式

  • linux桌面主题_ubuntu轻量级桌面

    linux桌面主题_ubuntu轻量级桌面Ubuntu默认的主题一直是大家一个争议的话题,很多Ubuntu用户对Ubuntu主色调为黄色的主题并不感冒,也许这就是所谓的众口难调吧。其实稍微动动手就可以让你的Ubuntu以一个新的面貌展现在你的面前。刚刚在sizzledcore.com上看到适用于UbuntuLinux的23个不同风格的主题,感觉相当不错,便立即和大家分享。当然你也可以把他们用的采用GNOME桌面的别…

  • ASP.NET_SessionId 何时生成?何时失效?有何作用呢?

    ASP.NET_SessionId 何时生成?何时失效?有何作用呢?相信做asp.netweb开发的码友们,对ASP.NET_SessionId一定不陌生。ASP.NET_SessionId保存在浏览器cookie中。那么它是来源于哪里?何时生成?何时失效?有何作用呢?带着这些疑问,我们开始探寻它。废话不多说,实践才是检验真理的最好方法,直接上代码。打开VS建立一个APS.NETMVC程序,在HOME页面添加如下代码:clearSession和clearSessionId这两个是ajax方式请求过去的,不会刷新页面,对应的后台方法如下:对应的action代

  • C++map的遍历_Map集合循环遍历的几种方式

    C++map的遍历_Map集合循环遍历的几种方式C++map遍历的几种方式#include<iostream>#include<unordered_map>usingnamespacestd;intmain(){unordered_map<string,int>mp;mp[“张三”]=20;mp[“李四”]=18;mp[“王五”]=30;//方式一、迭代器cout<<“方式一、迭代器”<&lt

  • 诺基亚6300手机游戏下载_重玩JAVA手机游戏

    诺基亚6300手机游戏下载_重玩JAVA手机游戏随着安卓苹果手机的普及、手机的性能不断提高,手机游戏也从黑白俄罗斯方块进化为了各种华丽大作,有的甚至已经超越了多年前的电脑游戏。然而令人惋惜的是,大多数游戏只是画面进步了,玩法却在退步,这一点,从塞班、JAVA、MTK山寨机时代走过来的玩家肯定深有体会。想想看,在那个手机网络不发达,一个月10M流量用不完的年代,手机游戏厂商自然是以开发单机游戏为重心,即便是手机网游,比如口袋精灵,天劫OL,契约等…

  • datax(18):源码解读Transformer

    datax(18):源码解读Transformer现在很多场景都把datax当做ETL工具,datax中的各种reader相当于E(Extract),各种writer相当于L(load),那么datax中是否有T(transform)。答案是肯定的~一、概述transformer作用:在生产上数据传输,一般情况下只需要rw就行,但是有时候需要在中间过程做些操作,比如加解密、切割、拼接等等,这个时候就需要transform了。族谱datax中的transform有2个顶级祖宗,简单类型的Transformer和复杂类型的ComplexTran.

发表回复

您的电子邮箱地址不会被公开。

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