zoukankan      html  css  js  c++  java
  • 用jQuery,ajax,实现三级联动封装JS的文件

    // JavaScript Document
    $(document).ready(function(e) {
    	//找到ID=SANJI的DIV,造三个下拉扔进去
       	var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
        $("#sanji").html(str);
    //加载省的数据
    	Hsheng();
    	//加载市的数据
    	Hshi();
    	//加载区的数据
    	Hqu();
    	//给省的下拉加点击事件
    	$("#sheng").click(function(){
    			Hshi();//重新加载市
    			Hqu();//重新加载区
    		});
    	$("#shi").click(function(){//给市的下拉加点击事件
    			Hqu();//重新加载区
    		});
    });
    function Hsheng(){//加载省份的方法
    	var code="0001";
    	$.ajax({
    		url:"shicl.php",
    		data:{code:code},
    		type:"POST",
    		dataType:"TEXT",
    		success: function(data){
    			var hang = data.split("|");
    			var str = "";
    			for(var i=0;i<hang.length;i++)
    				{
    					var lie = hang[i].split("-");
    					str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    				}
    			$("#sheng").html(str);
    			}
    		});
    	}
    function Hshi(){//加载市的方法
    	var code=$("#sheng").val();//找市的父级代号
    	$.ajax({
    		url:"shicl.php",
    		data:{code:code},
    		type:"POST",
    		dataType:"TEXT",
    		success: function(data){
    			var hang = data.split("|");
    			var str = "";
    			for(var i=0;i<hang.length;i++)
    				{
    					var lie = hang[i].split("-");
    					str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    				}
    			$("#shi").html(str);
    			}
    		});
    	}
    	function Hqu(){//加载区的方法
    	var code=$("#shi").val();//找区的父级代号
    	$.ajax({
    		url:"shicl.php",
    		data:{code:code},
    		type:"POST",
    		dataType:"TEXT",  
    		success: function(data){
    			var hang = data.split("|");
    			var str = "";
    			for(var i=0;i<hang.length;i++)
    				{
    					var lie = hang[i].split("-");
    					str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    				}
    			$("#qu").html(str);
    			}
    		});
    	}
    
  • 相关阅读:
    inotifywait实时监控文件目录
    centos7支持xming
    ssh目录权限说明
    利用xinetd实现简单web服务器
    python3 使用http.server秒速搭建web服务器
    linux FFMPEG 摄像头采集数据推流
    Linux nginx+rtmp服务器配置实现直播点播
    Nginx中加入nginx-rtmp-module
    ubuntu查看屏幕分辨率
    运用设计原则编写可测试性的代码
  • 原文地址:https://www.cnblogs.com/yi11/p/6854834.html
Copyright © 2011-2022 走看看