zoukankan      html  css  js  c++  java
  • 用jquery写的json省市县三级联动下拉

        <form action="#" name="myform">  
            <label></label><select name="provice" id="provice"><option value="-1">请输入省份</option></select>  
            <label></label><select name="city" id="city"><option value="-1">请输入城市</option></select>  
            <label></label><select name="locale" id="locale"><option value="-1">请输入区县</option></select>  
        </form>  

    2. 定义json数据源:

        var jsonData = [{  
            treeNode : '请输入省份',  
            value : -1,  
            childNode : [{  
            treeNode : '请输入城市',  
            value : -1,  
            childNode : [{  
                    treeNode : '请输入区县',  
                value : -1,  
                childNode : []   
            }]  
            }]    
        },{  
            treeNode : '北京',  
            value : 1,  
            childNode : [{  
            treeNode : '东城区',  
            value : 11,  
            childNode : []  
            },{  
            treeNode : '西城区',  
            value : 12,  
            childNode : []  
            }]  
        },{  
            treeNode : '广西壮族自治区',  
            value : 2601,  
            childNode : [{  
            treeNode : '南宁',  
            value : 6653,  
            childNode : [{  
                treeNode : '横县',  
                value : 10799,  
                childNode : []  
            }, {  
                treeNode : '宾阳县',  
                value : 10800,  
                childNode : []  
                }]  
            }]  
        }]  

    3. javascript代码:

        function initCountry(){  
            var provice = $("#provice");  
            var city = $("#city");  
            var locale = $("#locale");  
            var proviceStr = "";  
            $.each(<span style="color:#FF0000;">jsonData</span>,function(index,items){  
                proviceStr += "<option value='"+jsonData[index].value+"'>"+jsonData[index].treeNode+"</option>";  
            });  
            provice.empty().append(proviceStr);  
            provice.bind("change",function(){  
                if($(this).find(":selected").attr("value") == -1){        
                    city.empty().append("<option value='-1'>请输入区县</option>");  
                }  
            });  
            provice.bind("change",function(){  
                var cityStr = '';  
                var index = provice.find(":selected").index();  
                $.each(jsonData[index].childNode,function(index,items){  
                    city.empty();  
                    cityStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";  
                    city.append(cityStr);  
                })  
                changeLocale();  
            });  
            city.bind("change",changeLocale);  
            function changeLocale(){  
                var localeStr = '';  
                var index = provice.find(":selected").index();  
                var index2 = city.find(":selected").index();  
                $.each(jsonData[index].childNode[index2].childNode,function(index,items){  
                    locale.empty();  
                    localeStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";  
                    locale.append(localeStr);  
                })  
                if(localeStr == ''){  
                    locale.empty();  
                    locale.append("<option value='-11'>请输入区县</option>");  
                }  
            }  
        }  
        $(function(){  
            initCountry();  
              
        })  
  • 相关阅读:
    【EF学习笔记11】----------查询中常用的扩展方法
    .NET 扩展方法
    【EF学习笔记10】----------主从表级联操作
    【EF学习笔记09】----------使用 EntityState 枚举标记实体状态,实现增删改查
    【EF学习笔记08】----------加载关联表的数据 显式加载
    【EF学习笔记07】----------加载关联表的数据 贪婪加载
    【EF学习笔记06】----------加载关联表的数据 延迟加载
    Linux内核ROP姿势详解(二)
    见微知著(三):解析ctf中的pwn--Fastbin和bins的溢出
    见微知著(二):解析ctf中的pwn--怎么利用double free
  • 原文地址:https://www.cnblogs.com/qingruozhu/p/6489212.html
Copyright © 2011-2022 走看看