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();  
              
        })  
  • 相关阅读:
    关联规则算法---Eclat算法
    Apriori算法第二篇----详细分析和代码实现
    scrapy框架初识
    git入门
    phantomjs的和谷歌浏览器的简单使用
    selenium模块的而简单使用
    代理ip的使用以及多进程爬取
    爬虫之re块解析
    爬虫初识和request使用
    xpath的基础使用
  • 原文地址:https://www.cnblogs.com/qingruozhu/p/6489212.html
Copyright © 2011-2022 走看看