<?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>
分享到：
相关推荐
在二级联动中，JSON通常用来存储和传递层级关系的数据，如省市区的结构，使得前端能够动态构建联动的选项。 插件"jquery.tzSelect+二级联动+Json"可能是基于jQuery的一个自定义插件，它专注于实现这种联动效果。...
返回到前端，JavaScript接收到服务器返回的JSON数据后，会解析这些数据并动态地在二级菜单（城市）中填充选项。同样，当用户在二级菜单中选择一个城市时，会再次触发AJAX请求，获取该城市的下属县，并更新三级菜单。...
在这里，我们会创建一个JSON文件，存储省市的关联数据。例如： ```json { "province": [ { "id": "1", "name": "北京市", "cities": ["东城区", "西城区", "朝阳区", ...] }, { "id": "2", "name": "上海...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也方便机器解析和生成。它基于JavaScript的一个子集，但被广泛应用于各种编程语言中，包括Python、Java、C#等，作为数据传输...
这里提到的"JQuery省、省市二级联动、省市县/区三级联动"是一个使用jQuery库实现的前端解决方案，它能为用户提供流畅且视觉效果良好的交互体验。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、...
省市二级联动是网页开发中常见的一种交互功能，主要用于表单中的地址选择，用户先选择省份，然后根据省份自动填充对应的市区。这种功能提高了用户输入的效率，也为后台数据处理提供了便利。下面将详细介绍如何实现...
标题中的“省市县三级、省市二级联动菜单”指的是在网页设计中常见的下拉菜单功能，这种功能常用于地理信息选择，如用户填写地址时选择所在省份、城市和区县。这种联动效果意味着当用户在一级菜单（省份）中选择一个...
《jQuery省市二级联动关联店面查询表单代码》 在网页开发中，经常需要实现一种功能：当用户选择一个省份时，下方的城市下拉菜单会自动更新为与该省份相关的城市选项，这种效果被称为二级联动。这个名为"jQuery省市...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在ECharts中，使用JSON数据来构建地图时，每个省和市都会对应一个键值对，键通常是省份或城市的ID，...
在JavaScript编程中，"省市二级联动"是一种常见的交互设计，常用于网站的地址选择或信息填写，例如在电商网站的收货地址填写页面。这种功能的实现基于JavaScript的DOM操作和事件监听，允许用户在选择省份后，自动...
在网页开发中，"省市联动的二级菜单"是一种常见的交互设计，主要用于用户选择地理位置时，如填写收货地址。这种菜单通常由一个省级选择框和一个市级选择框组成，当用户在省级菜单中选择一个省份时，市级菜单会自动...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它采用完全独立于语言的文本格式，但也使用了类似于C家族语言的习惯，包括C、C++、C#、Java、JavaScript、Perl、Python等。因此，ECharts的地图JSON...
本文将详细讲解如何使用JavaScript实现省市区三级联动菜单。 首先，我们需要理解什么是“联动”：当用户在一个选择框中做出选择时，其他关联的选择框会根据这个选择自动更新其选项。在这个案例中，省份、城市和区县...
二级联动通常用于处理多级关联的数据，如省份与城市的关系，或者类别与子类别的关系。这种功能使得用户在选择一个选项时，能够动态地更新并展示相关的次级选项，提供更加流畅的交互体验。 首先，我们要理解基本概念...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在ECharts中，每个省、市的地图JSON文件包含了该地区的边界信息、经纬度坐标以及可能的其他附加属性...
省市二级联动代码与数据库是网页开发中常见的功能，主要用于用户选择地理位置时，如省和市。这个功能在很多网站和应用程序中都能见到，比如在线购物、地图服务、求职招聘等。实现这一功能主要依赖于后端服务器（如...
在上下文中的“三级联动”指的是当用户在第一级（省）下拉菜单中选择一个选项时，第二级（市）的下拉菜单会自动更新为与所选省份相关的城市；同样，当用户在第二级选择一个城市后，第三级（县或区）的下拉菜单会显示...