<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动</title>
</head>
<body>
省：
<select style="width: 100px;" id="pre" onchange="chg(this);">
<option value="-1">请选择</option>
</select>
市：
<select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
区：
<select style="width: 100px;" id="area"></select>
</body>
<script>
//声明省
var pres = ["北京", "上海", "山东"]; //直接声明Array
//声明市
var cities = [
["东城", "昌平", "海淀"],
["浦东", "高区"],
["济南", "青岛"]
];
var areas = [
[
["东城1", "东城2", "东城3"],
["昌平1", "昌平2", "昌平3"],
["海淀1", "海淀2", "海淀3"]
],
[
["浦东1", "浦东2", "浦东3"],
["高区1", "高区2", "高区3"]
],
[
["济南1", "济南2"],
["青岛1", "青岛2"]
]
]
//设置一个省的公共下标
var pIndex = -1;
var preEle = document.getElementById("pre");
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
//先设置省的值
for (var i = 0; i < pres.length; i++) {
//声明option.<option value="pres[i]">Pres[i]</option>
var op = new Option(pres[i], i);
//添加
preEle.options.add(op);
}
function chg(obj) {
if (obj.value == -1) {
cityEle.options.length = 0;
areaEle.options.length = 0;
}
//获取值
var val = obj.value;
pIndex = obj.value;
//获取ctiry
var cs = cities[val];
//获取默认区
var as = areas[val][0];
//先清空市
cityEle.options.length = 0;
areaEle.options.length = 0;
for (var i = 0; i < cs.length; i++) {
var op = new Option(cs[i], i);
cityEle.options.add(op);
}
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
areaEle.options.add(op);
}
}
function chg2(obj) {
var val = obj.selectedIndex;
var as = areas[pIndex][val];
areaEle.options.length = 0;
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
areaEle.options.add(op);
}
}
</script>
</html>
三级联动练习
时间： 2024-10-25 02:48:52
三级联动练习的相关文章
ajax简介以及用ajax做的三级联动小练习
ajax基本结构: 1 var name = $("#text_1").val(); 2 $.ajax({ 3 url: "Ashxs/Handler.ashx",//一般处理程序路径 4 data: { "name": name },//要传输的数据,冒号前面是键名后面是要传输的数据,如果有多条数据在大括号内用逗号拼接 5 type: "post",//传输方式 6 dataType: "json",//
用DropDownList实现的省市级三级联动
这是一个用DropDownList 实现的省市级三级联动,记录一下········ <asp:ScriptManager ID="ScriptManager1" runat="server">/asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <Cont
Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动
看网上JqueryAjax三级联动的例子讲不是很全,代码也给的不是很全,给初学者带来一定的难度.小弟自己写了一个,可能有些地方不是很好,希望大家能够提出建议. 用的是Hibernate+struts2写的.http://blog.csdn.net/luckey_zh/article/details/22995389 以代码来说话吧. 首先是index1.jsp页面 [html] view plaincopy <%@ page language="java" import=&quo
层的三级联动
/部门下拉选单绑定数据 function CreateDeptEntity(dataList) { var select = "#setdept"; jQuery(select).empty(); jQuery(select).append("<OPTION value=0>请选择</OPTION>"); if (dataList != nu
使用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
省市三级联动
mumuy-widget-91839b8 http://jquerywidget.com/ /** * jquery.citys.js 1.0 * http://jquerywidget.com */ ;(function (factory) { if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) { // AMD或CMD define([ "jq
2017-5-7 三级联动
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using 三级联动.App_code; namespace 三级联动
WinForm Timer控件,三级联动[省,市,区]
Timer控件: 组件中的最后一个控件,功能是可以根据用户自定义的时间间隔来触发时间,不会印象窗体本身的其他事件进行. 属性: Enable 设置控件是否启用 Interval 设置事件的频率,以毫秒为单位 事件只有一个:Tick事件 例:使用timer控件获取当前时间并即时变动 private void timer1_Tick(object sender, EventArgs e) { label1.Text = DateTime.Now.ToString("yyyy年MM月dd日hh时m
ajax实现省、市、区、三级联动（例题）
题目要求: 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 主界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo
三级联动
以下为phpcms中的三级联动程序实现: HTML代码: 1 <!--三级联动--> 2 <div> 3 <form> 4 <label>请选择收货地址:</label> 5 <div id="p-c"> 6 <select name="province" id="province">请选择省份</select> 7 <select name=&