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);
    			}
    		});
    	}
    
  • 相关阅读:
    Linux下nginx 的常用命令
    Mybatis generator 自动生成代码(2)
    Android Retrofit2 网路编程
    Android webView输出自定义网页
    Android Studio OkHttpClient使用
    Android Studio SVN使用
    Android Toolbar的使用 顶部标题栏+后退键
    Android DrawLayout + ListView 的使用(一)
    RabbitMQ配置与安装
    Struts2拦截器
  • 原文地址:https://www.cnblogs.com/yi11/p/6854834.html
Copyright © 2011-2022 走看看