<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单联动</title>
<style>
#province,#city{
width: 200px;
height: 100px;
}
p{
cursor: pointer;
}
p:hover{
background-color: gray;
}
</style>
</head>
<body>
<h4>省份</h4>
<select name="" id="province" multiple>
</select>
<h2>城市</h2>
<select name="" id="city" multiple>
</select>
<script>
var x = [
[
['0','1']
]
]
console.log(x)
function dataElemnt(){
this.province = document.getElementById('province');
this.city = document.getElementById('city');
this.region = document.getElementById('region');
// 数据保存 ： 第一项 是省
this.data = [
['江西省','南昌市','宜春市','赣州市','吉安市','九江市','上饶市','抚州市','新余市'],
['安徽省','合肥市','芜湖市','淮南市','马鞍山市'],
['江苏省','南京市','无锡市','无锡市','常州市','南通市']
]
}
var object = new dataElemnt();
// 初始化数据
function city_data(){
var data = object.data;
// 初始化数据
for(var i=0; i<data.length; i++){
// 创建默认省份
var option = document.createElement('option');
option.setAttribute('value','shen')
var option_text = document.createTextNode( data[i][0] )
option.appendChild( option_text )
object.province.appendChild(option);
}
}
// 点击 省 的时候
function on_pro(){
var pro = object.province;// select
pro.onchange=function(){
var index = pro.selectedIndex; // 当前选中的索引值
// console.log( index )
var shen = pro.options[ index ].text; // 选中的元素的值
showCity(shen)
}
}
// 显示数据
function showCity(shen){
var city = object.city;
var data = object.data;
for(var i=0; i<data.length; i++){
if( shen == data[i][0]){
// 数据会叠加，清空数据
city.innerHTML ='';
for( var j=1; j< data[i].length; j++){
var option = document.createElement('option');
var option_text = document.createTextNode( data[i][j] );
option.appendChild( option_text )
city.appendChild( option );
}
}
}
}
// 加载执行
window.onload=function(){
city_data();
on_pro();
// 默认是江西省
showCity('江西省');
console.log( object.data)
}
</script>
</body>
</html>
