学习笔记——JAVA
一、重点：
二、学习内容
昨日遗留问题已解决 三级联动 省市区
第一种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="province" onchange="setcity()">
<option value="default">---请选择---</option>
<option value="jilin">吉林省</option>
<option value="liaoning">辽宁省</option>
</select>
<select id="city" onchange="setarea()"></select>
<select id="area"></select>
<script>
function setcity(){
let province=document.querySelector("#province").value;
alert(province)
// console.log(province)
let city=document.querySelector("#city");
let html="";
if(province=='jilin'){
html="<option value='cc'>长春市</option><option value='jl'>吉林市</option>";
city.innerHTML=html;
setarea();
}
}
function setarea(){
let city=document.querySelector("#city").value;
let area=document.querySelector("#area");
switch(city){
case 'cc':
area.innerHTML="<option value='ng'>南关区</option><option value='kc'>宽城区</option>";
break;
case 'jl':
area.innerHTML="<option value='cy'>昌邑区</option><option value='cy'>船营区</option>";
break;
}
}
</script>
</body>
</html>
第二种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
select {
width: 100px;
height: 35px;
}
.shi_div{
margin-top: 40px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="sheng_div">
<select class="sheng">
<option>请选择</option>
</select>
<span>省</span>
</div>
<div class="shi_div">
<select class="shi"></select>
<span>市</span>
</div>
<div class="qu_id">
<select class="qu"></select>
<span>区</span>
</div>
<script>
var shengSelect = document.querySelector('.sheng');
var shiSelect = document.querySelector('.shi');
var quSelect = document.querySelector('.qu');
var shenglist = ['吉林', '辽宁', '黑龙江'];
var shilist = [['长春', '吉林', '白城'], ['沈阳', '大连', '铁岭'], ['哈尔滨', '齐齐哈尔', '大庆']];
var qulist = [
[['南关区', '宽城区', '朝阳区'], ['吉1区', '吉2区', '吉3区'], ['白1区', '白2区', '白3区']],
[['沈1区', '沈2区', '沈3区'], ['大1区', '大2区', '大3区'], ['铁1区', '铁东2区']],
[['武1区', '武2区', '武3区'], ['荆1区', '荆2区', '荆3区'], ['襄1区', '襄2区', '襄3区']]
];
var index = 0;//下标
//省
for (var i = 0; i < shenglist.length; i++) {
var shengOption = new Option(shenglist[i]);
shengSelect.options.add(shengOption);
}
//省
shengSelect.onchange = function (ev) {
// console.log(ev);
index = ev.target.selectedIndex - 1;
// console.log(index);
if (index == -1) {
//选择“请选择”,让市区列表为空
shiSelect.options.length = 0;
quSelect.options.length = 0;
} else {
//再次作选择时，让市区列表为空，好重新获取市区数据
shiSelect.options.length = 0;
quSelect.options.length = 0;
//在点击省时，给市添加option
for (var j = 0; j < shilist.length; j++) {
console.log(shilist[index][j]);
var shiOption = new Option(shilist[index][j]);
shiSelect.options.add(shiOption);
}
//给区添加option
for (var k = 0; k < qulist[index][0].length; k++) {
var quOption = new Option(qulist[index][0][k]);
quSelect.options.add(quOption);
}
}
};
//市
shiSelect.onchange = function (e) {
var indexs = e.target.selectedIndex;
//再次选择时，让区的列表为空，重新获取区的数据
quSelect.options.length = 0;
//点击市时，给区添加option
for (var i = 0; i < qulist[index][indexs].length; i++) {
var quOption = new Option(qulist[index][indexs][i]);
quSelect.options.add(quOption);
}
}
</script>
</body>
</html>
第三种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="my.js"></script>
</head>
<body>
<select name="sheng" id="sheng" onfocus="setsheng()" onchange="setshi()">
<option value="0">---请选择省---</option>
</select>
<select name="shi" id="shi" onfocus="setshi()" onchange="setqu()">
<option value="0">---请选择市---</option>
</select>
<select name="qu" id="qu">
<option value="0">---请选择区---</option>
</select>
<script>
let sheng = document.getElementById('sheng');
let shi= document.getElementById('shi');
let qu = document.getElementById('qu');
function setsheng(){
sheng.length = arr.length+1;
for(let i=1;i<sheng.length;i++){
sheng[i].innerHTML=arr[i-1].name;
sheng[i].value=i;
}
}
function setshi(){
if(sheng.length == 1){
return;
}
shi.value=0;
let shiList=arr[sheng.value-1].shi;
shi.length=shiList.length+1;
for(let i=1;i<shi.length;i++){
shi[i].innerText=shiList[i-1].name;
shi[i].value=i;
}
}
function setqu(){
let quList=arr[sheng.value-1].shi[shi.value-1].districtAndQu;
console.log(quList);
qu.length=quList.length+1;
for(let i=1;i<qu.length;i++){
qu[i].innerText=quList[i-1];
qu[i].value=i;
}
}
</script>
</body>
</html>
my.js
let arr=[
{
"name": "吉林省",
"shi": [
{
"name": "长春市",
"districtAndQu": ["宽城区", "朝阳区"]
}
,{
"name": "四平市",
"districtAndQu": ["铁东区", "铁西区"]
}
]
},
{
"name": "辽宁省",
"shi": [
{
"name": "沈阳市",
"districtAndQu": ["沈河区","皇姑区"]
},
{
"name": "大连市",
"districtAndQu": ["中山区","西岗区"]
}
]
}
]
三、笔记内容
浙公网安备 33010602011771号