zoukankan      html  css  js  c++  java
  • jquery 城市三级联动

    js代码

    /*城市三级联动
    
    * @method cityChange
    
    * @param allProvince,allCity,allDistrict
    
    */
    
    
    function cityChange(provinceN,cityN,districtN){
        var all_province="";
        for(var i=0;i<allCity.province.length;i++){
                all_province+='<option name="province" value='+allCity.province[i].id+'><span class="province">'+allCity.province[i].name+'</span></option>';  };
    
        $('#'+provinceN).append(all_province);
    
        
        $('#'+provinceN).change(function () {
                    var provinceId = $('#'+provinceN).val();
                    $('#'+cityN).find("option:gt(0)").remove();
                     $('#'+districtN).find("option:gt(0)").remove();
                   var all_city="";  
                   if( provinceId!=99999){             
                   for(var j=0;j<allCity.city[provinceId].length;j++){
                             all_city += '<option name="city" value='+allCity.city[provinceId][j].id+'><span class="city">'+allCity.city[provinceId][j].name+'</span></option>';                                         
                        } } ;
                        $('#'+cityN).append(all_city);                                  
                });
    
        $('#'+cityN).change(function () {
                    var cityId = $(this).val();
                    var all_district="";                
                   for(var k=0;k<allCity.district[cityId].length;k++){
                             all_district += '<option name="district" value='+allCity.district[cityId][k].id+'><span class="city">'+allCity.district[cityId][k].name+'</span></option>';                                         
                        }  ;
                        $('#'+districtN).append(all_district);                                  
                });            
    }
    

    HTML代码

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>城市三级联动</title>
    </head>
    <body>
    	<label>三级联动</label>
    	<div>
            <select  id="allProvince">
                <option value="">请选择省份</option>
            </select>
            <select  id="allCity" >
                <option value="">请选择城市</option>
            </select>
            <select  id="allDistrict">
                <option value="">请选择区县</option>
            </select>             
    	</div>
    	
    <script src="http://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
    <script src="allcity.js"></script>
    <script src="citychange.js"></script>
    <script>
    	$(function(){cityChange('allProvince','allCity','allDistrict');})
    </script>
    </body>
    </html>
    

     源码下载地址==》下载

  • 相关阅读:
    js 获取表单和页面控件数据
    vue axios upload 多个文件
    vue antd axios 使用
    antd vue 修改modal弹窗样式
    线性回归的改进-岭回归
    线性回归
    00
    集成学习方法之随机森林
    决策树
    第十讲 让机器像人类一样学习--强化学习-----学习总结
  • 原文地址:https://www.cnblogs.com/calamus/p/5985642.html
Copyright © 2011-2022 走看看