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);
    			}
    		});
    	}
    
  • 相关阅读:
    ASP.NET部署前环境检测
    (转)基于.Net的单点登录(SSO)解决方案(1)
    Easy UI 勾选单选框
    Sqlserver 自定义函数
    MVC站点安全开发
    (转)基于.Net的单点登录(SSO)解决方案(2)
    ASP.NET站点跨子域名单点登陆(SSO)的实现
    角色权限功能点设置页面
    XmlHelper
    MVC错误处理(三)
  • 原文地址:https://www.cnblogs.com/yi11/p/6854834.html
Copyright © 2011-2022 走看看