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);
    			}
    		});
    	}
    
  • 相关阅读:
    img在src无效或者是空的时候出现边框
    console.log((!+[]+[]+![]).length)
    JQuery与zTree记录
    axis2框架实现webservice
    jsp页面常用代码
    使用MyEclipse实现通过数据库中表和hibernate生成实体类和映射配置文件
    PL/SQL Developer工具的使用简介
    有关静态代码块、代码块、构造方法执行顺序
    完全平方数的个数
    队列Q(排序方式)
  • 原文地址:https://www.cnblogs.com/yi11/p/6854834.html
Copyright © 2011-2022 走看看