<?xml version="1.0" encoding="UTF-8" ?>
<!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="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body onload="ale();">
<table>
<tr>
<td>
<select name="province" id="province">
<option>请选择...</option>
</select>
</td>
<td>省</td>
<td>
<select name="city" id="city">
<option>请选择...</option>
</select>
</td>
<td>市</td></tr>
</table>
<script>
window.onload=function(){
/*全国的城市 用json 表示*/
var china = [
{province:"四川",id:"1",city:["成都","西昌","绵阳","广元"]},
{province:"云南",id:"2",city:["昆明","大理","昭通","西双版纳"]}
]
/*获取省的下拉列表*/
var selectone = document.getElementById("province");
/*获取城市的下拉列表*/
var selecttwo = document.getElementById("city");
/*循环获取到所有的省,并在省下拉列表增加对应的节点*/
for(var i = 0;i<china.length;i++){
/*创建省下面的option元素*/
var optionElement = document.createElement("option");
/*给该option元素设置属性 value*/
optionElement.setAttribute("value",china[i].id);
/*给option元素添加文本元素*/
optionElement.innerHTML=china[i].province;
/*把option元素添加到省下拉列表*/
selectone.appendChild(optionElement);
}
/*给省下拉列表添加change事件*/
selectone.onchange = function (){
var id ;
/*获取省下面的所有option元素*/
var options = selectone.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
/*获取到被选中的option元素 并将该选中的option的value值付给id*/
if(options[i].selected){
id = options[i].value;
}
}
/*获取城市下拉列表的option元素*/
var cityElement = selecttwo.getElementsByTagName("option");
/*删除城市下拉列表里面的所有元素 除去请选择 用 反删*/
for(var i=cityElement.length-1;i>0;i--){
selecttwo.removeChild(cityElement[i]);
}
/*循环获取到全国下面的省对应的城市*/
for(var i=0;i<china.length;i++){
/*判断之前的id值与对应的里面的id比较,如果匹配就去相应的省对应下来的城市*/
if(china[i].id==id){
/*获取到省下面的对应的城市数组*/
var citys = china[i].city;
/*再次通过循环在城市下拉列表添加option元素*/
for(var j=0;j<citys.length;j++){
var optionElement = document.createElement("option");
optionElement.setAttribute("value",citys[j]);
optionElement.innerHTML=citys[j];
selecttwo.appendChild(optionElement);
}
}
}
}
}
</script>
</body>
</html>
分享到:
相关推荐
省市区三级联动 , JavaScript 省市区三级联动 json文件,JavaScript 省市区三级联动 json文件
JavaScript JSON Cookbook 英文mobi 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
支持将自身转换成json字符串输出
JavaScript and JSON Essentials is a step-by-step guide that will introduce you to JSON and help you understand how the lightweight JSON data format can be used in different ways either to store data ...
JavaScript Json Create、Select、Delete、Update
功能强大的 json editor 源代码,使用 javascript 编写
全国高等院校,省级菜单数据(json),配合JavaScript可所为二级联动菜单,数据已做好json格式化,方便调用,ajax效果极好.好东西大家分享!
javascript 解析json必备利器 JSON.parse(str) JSON.stringify(jsonObj) 等等经典方法扩展。
JavaScript JSON Cookbook 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
[Packt Publishing] JavaScript & JSON 核心技术 (英文版) [Packt Publishing] JavaScript and JSON Essentials (E-Book) ☆ 图书概要:☆ Successfully build advanced JSON-fueled web applications with this ...
JavaScript JSON Cookbook 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或...
因项目需求,自己拼接麻烦,所以将javascript拼接json封装成和java类似的操作,直接put() 与 get() 就可以使用,支持json数组,使用的时候只需要 创建对象 并赋值 然后调用内部参数即可,源码中有示例。因为删除操作...
1、商品管理项目 增删改查 此项目在change文件夹中,数据库.sql文件在sql文件夹中 2、JSON JavaScript AJAX前后端分离基础 此项目前端在news中,后端api在newsapi中,数据库.sql文件在sql文件夹中 还有一点笔记。
JavaScript和JSON入门级文档
JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
json2.js,包JSON-js-master.zip包,json数据解析javascript工具
该资源为支持省市区县四级联动所需数据,数据类型为json,可直接供JavaScript使用。
支持键盘和滚轮翻页的javascript读取Json数据分页显示
纯javascript实现json与对象的互相转换项目
功能:处理json数据 1.将json字符串转换成json对象 2.将json对象转换成json字符串