jquery实现数据三级联动

一时失言乱红尘 2023-02-25 13:23 9阅读 0赞

<style>
        *{ margin: 0;padding: 0;}
        table {border-spacing: 0;border-collapse: collapse;}
        td { display: table-cell;vertical-align: inherit; }
        th {display: table-cell;vertical-align: inherit; font-weight: bold;height: 50px;}
        tr{height: 40px;}
        .box{padding: 20px;}
         td{text-align: center;}   
         select{ background: transparent;width: 180px;height: 30px; border-radius: 40px; border: 1px solid #333;   }
        </style>

<body>
        <div class="box">
            区域:  <select name="" id="a">
                 <option value="">请选择</option>
                 <option value="">广州市</option>
                 <option value="">上海市</option>
                 <option value="">台北市</option>
             </select>
             城市:  <select name="" id="b">
                <option value="">请选择</option>
                <option value="">a</option>
                <option value="">b</option>
                <option value="">c</option>
            </select>
            地址:  <select name="" id="c">
                <option value="">请选择</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </select>
        </div>
        <table class="tbs" border="2"  width="100%" height="auto" cellspacing="0" cellpadding="5px" align="center">
             <thead>
                 <tr>
                     <th rowspan="2">所在区域</th>
                     <th rowspan="2">所在城市</th>
                     <th rowspan="4">所在地址</th>
                     <th rowspan="2">数据</th>
                </tr>
             </thead>
             <tbody id="tbody">
                 
             </tbody>
        </table>
    </body>

<script>
        var  list =[
            {
               city : '广州市',
               b:'aaaaa',
               c:'11111',
               d:'xxxxxxs'
            }, {
               city : '广州市',
               b:'bbbbbb',
               c:'22222',
               d:'xxxxxxs'
            },
            {
               city : '北京市',
               b:'bbbbb',
               c:'22222222',
               d:'xxxxxxs'
            },
            {
               city : '北京市',
               b:'bbbbb',
               c:'22222222',
               d:'xxxxxxs'
            },
            {
               city : '上海市',
               b:'ccccccccc',
               c:'3333333',
               d:'xxxxxxs'
            },
            {
               city : '上海市',
               b:'ccccccccc',
               c:'3333333',
               d:'xxxxxxs'
            },
            {
               city : '台北市',
               b:'bbbbbbbbbbb',
               c:'444444',
               d:'xxxxxxs'
            },
            {
               city : '台北市',
               b:'cccccccc',
               c:'444444',
               d:'xxxxxxs'
            }
        ];
            
        function flush( list){
            $("#tbody").children().remove();
            $(list).each(function(i,data){
            $('#tbody').append(`<tr>
                <td>${data.city}</td>
                <td>${data.b}</td>
                <td>${data.c}</td>
                <td>${data.d}</td>
                </tr>`);
        });
        }
     
        var a = '';
        var b = '';
        var c = '';
    
        $("#a").change(function(){
            var text = $('#a option:selected').text();
            if(text =='请选择'){
                a = '';
            }else{
                a =text;
            }
            filter();
        });
    
        $("#b").change(function(){
            var text = $('#b option:selected').text();
            if(text =='请选择'){
                b = '';
            }else{
                b = text;
            }
            filter();
        });
    
        $("#c").change(function(){
            var text = $('#c option:selected').text();
            if(text =='请选择'){
                c = '';
            }else{
                c =text;
            }
            filter();
        });
           
        function filter(){
           var newList =  list.filter(o =>{
                var flag1 = o.city.indexOf(a);
                var flag2 = o.b.indexOf(b);
                var flag3 = o.c.indexOf(c);
               
                return flag1 >=0 ? ( flag2>=0 ? (flag3>=0 ?true:false ):false) :false;
            })
           
            flush(newList);
        }
    
        flush(list);
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20230209/b7c97eb3b5e9445b98e16106ac11f8cf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery 实现下拉列表三级联动

需求: (1) 根据省、获得市、 (2) 通过市，再获得到县， (3) 每个下拉框数据都由一个数组组成; 效果：初始页面 ![201901151552241

朴灿烈づ我的快乐病毒、/ 2023年10月18日 13:46/ 0 赞/ 118 阅读

相关 Jquery/AJAX实现三级联动

页面代码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html>

淡淡的烟草味﹌/ 2023年09月24日 14:52/ 0 赞/ 49 阅读

相关 jquery实现省市区三级联动

jquery实现省市区三级联动 -------------------- 实现的图片先附上 ![在这里插入图片描述][watermark_type_ZmFuZ3po

约定不等于承诺〃/ 2023年06月09日 12:27/ 0 赞/ 156 阅读

相关 jquery实现数据三级联动

<style> { margin: 0;padding: 0;} table {border-spacing: 0;border-col

一时失言乱红尘/ 2023年02月25日 13:23/ 0 赞/ 10 阅读

相关 Javascript实现三级联动

三级联动：就是平时网页上需要选择的省市县对应位置的下拉栏模块，当选择好省位置后市的下拉栏更新为已选省的，县类似。 ![这里写图片描述][SouthEast] <!

亦凉/ 2022年06月12日 03:56/ 0 赞/ 292 阅读

相关省市区三级联动jquery实现代码

最近项目需要用到关于省市区三级联动下拉选择的功能，于是乎网上搜了一些做法，觉得有一些只是给出了小的案例，却很难找到详细的省、市、区的具体数据（其实，用baidu搜索就是这样啦）

àì夳堔傛蜴生んèń/ 2022年06月11日 02:28/ 0 赞/ 341 阅读

相关 jquery实现select三级联动（简单易懂）

尽可能每一步都做到详细，算是一个知识的回顾，有不足之处，希望大家多提意见该例子实现的是省市县三级联动。实现原理：省

妖狐艹你老母/ 2022年05月28日 03:24/ 0 赞/ 218 阅读

相关 jquery编写简单三级联动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

ゞ浴缸里的玫瑰/ 2022年05月23日 03:05/ 0 赞/ 135 阅读

相关《jQuery的ajax及+json实现三级联动》

1. jackson Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转

本是古典何须时尚/ 2022年05月11日 09:40/ 0 赞/ 209 阅读

相关 jquery实现省市县（区）三级联动

直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

﹏ヽ暗。殇╰゛Y/ 2022年05月06日 06:28/ 0 赞/ 371 阅读