用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);
			}
		});
	}
时间: 2024-08-07 21:19:34

用jQuery,ajax,实现三级联动封装JS的文件的相关文章

Jquery Ajax + php 三级联动实例

sanji.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

ASP.NET webform开发中基于Jquery,AJAX的三级联动

主要html代码 <select id="province"> <option value="0">--请选择省份--</option> </select> <select id="city"> <option value="0">--请选择城市--</option> </select> <select id="ar

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

JQuery+Ajax实战三级下拉列表联动(八)

本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: public static partial class BranchTwoService { /// <summary> /// 根据一级机构的ID得二级机构列表 /// </summary> /// <param name="branchOneId">1级机构I

jQuery实现select三级联动

参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQuery实现点击式选项卡jQuery实现select三级联动 效果 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 4

PHP ajax 实现三级联动

在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: 1 $(document).ready(function(e) { 2 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); 3 4 //填充内容

简单jquery实现select三级联动

简单的jquery实现select三级联动 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>selectList</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 .selectList{width:200

用jQuery实现省市区三级联动(可做插件)

用jQuery实现省市区三级联动(可做插件) 有参考别的文档,如有雷同,不胜感激 先上效果图 上三级联动代码 city.html <!DOCTYPE html> <html> <head> <title>city.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker            http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){