<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var arr_cs=["請選擇省/城市","北京市","上海市","天津市","重慶市","深圳市","廣東省"];
var arr_dq=[
["請擇城市/地區"],
["東城區","西城區","朝陽區"],
['寶山區','長寧區','豐賢區'],
['和平區', '河西區', '南開區'],
['俞中區', '南岸區', '江北區'],
['福田區', '羅湖區', '鹽田區'],
['廣州市','惠州市','汕頭市']
];
var arr_cz=[
["請選擇地區/城鎮"],
["東城1","東城2","東城3"],
["西城1","西城2","西城3"],
['朝陽1','朝陽2','朝陽3'],
['寶山1','寶山2','寶山3'],
['長寧1','長寧2','長寧3'],
['豐賢1','豐賢2','豐賢3'],
['和平1','和平2','和平3'],
['河西1','河西2','河西3'],
['南開1','南開2','南開3'],
['俞中1','俞中2','俞中3'],
['南岸1','南岸2','南岸3'],
['江北1','江北2','江北3'],
['福田1','福田2','福田3'],
['羅湖1','羅湖2','羅湖3'],
['鹽田1','鹽田2','鹽田3'],
['廣州1','廣州2','廣州3'],
['惠州1','惠州2','惠州3'],
['汕頭1','汕頭2','汕頭3']
];
window.onload=init;
function init(){
//獲取物件
var cs=document.form1.cs;
var dq=document.form1.dq;
var cz=document.form1.cz;
//指定省份和地區中<option>標記的個數
cs.length=arr_cs.length;
dq.length=arr_dq.length;
//回圈將陣列中的資料寫入省份和地區<option>標記中
for(var i=0;i<cs.length;i++){
cs.options[i].text=arr_cs[i];
cs.options[i].value=https://bbs.csdn.net/topics/arr_cs[i];
}
for(var i2=0;i2<dq.length;i2++){
dq.options[i2].text=arr_dq[i2];
dq.options[i2].value=https://bbs.csdn.net/topics/arr_dq[i2];
}
//修改省份和地區串列的默認選項
var index=0;
cs.selectedIndex=index;
dq.selectedIndex=index;
//指定地區和城鎮中<option>的個數
dq.length=arr_dq[index].length;
cz.length=arr_cz[index].length;
//回圈將陣列中的資料寫入地區和城鎮<option>標記中
for(var j=0;j<arr_dq[index].length;j++){
dq.options[j].text=arr_dq[index][j];
dq.options[j].value=https://bbs.csdn.net/topics/arr_dq[index][j];
}
for(var j2=0;j2<arr_cz[index].length;j2++){
cz.options[j2].text=arr_cz[index][j2];
cz.options[j2].value=https://bbs.csdn.net/topics/arr_cz[index][j2];
}
}
function ejld(index){
//選擇物件
var dq=document.form1.dq;
//修改省份串列的選擇項
cs.selectedIndex=index;
//指定地區中<option>標記的個數
dq.length=arr_dq[index].length;
//將回圈陣列中的資料寫入地區和城鎮<option>標記中
for(var j=0;j<arr_dq[index].length;j++){
dq.options[j].text=arr_dq[index][j];
dq.options[j].value=https://bbs.csdn.net/topics/arr_dq[index][j];
}
}
function sjld(index){
//選擇物件
var cz=document.form1.cz;
//修改地區串列的選擇項
dq.selectedIndex=index;
//指定城鎮中<option>標記的個數
cz.length=arr_cz[index].length;
//將回圈陣列中的資料寫入城鎮<option>標記中
for(var j2=0;j2<arr_cz[index].length;j2++){
alert(arr_cz[index][j2]);
cz.options[j2].text=arr_cz[index][j2];
cz.options[j2].value=https://bbs.csdn.net/topics/arr_cz[index][j2];
}
}
</script>
<body>
<form name="form1" method="post" action="">
省份：<select name="cs" id="cs" onchange="ejld(this.selectedIndex)"></select>
地區：<select name="dq" id="dq" onchange="sjld(this.selectedIndex)"></select>
城鎮: <select name="cz" id="cz"></select>
</form>
</body>
</html>
uj5u.com熱心網友回復：
用物件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<script type="text/javascript">
var arr_cs = [
"請選擇省/城市",
"北京市",
"上海市",
"天津市",
"重慶市",
"深圳市",
"廣東省",
];
var arr_dq = [
["請擇城市/地區"],
["東城區", "西城區", "朝陽區"],
["寶山區", "長寧區", "豐賢區"],
["和平區", "河西區", "南開區"],
["俞中區", "南岸區", "江北區"],
["福田區", "羅湖區", "鹽田區"],
["廣州市", "惠州市", "汕頭市"],
];
var arr_cz = [
["請選擇地區/城鎮"],
["東城1", "東城2", "東城3"],
["西城1", "西城2", "西城3"],
["朝陽1", "朝陽2", "朝陽3"],
["寶山1", "寶山2", "寶山3"],
["長寧1", "長寧2", "長寧3"],
["豐賢1", "豐賢2", "豐賢3"],
["和平1", "和平2", "和平3"],
["河西1", "河西2", "河西3"],
["南開1", "南開2", "南開3"],
["俞中1", "俞中2", "俞中3"],
["南岸1", "南岸2", "南岸3"],
["江北1", "江北2", "江北3"],
["福田1", "福田2", "福田3"],
["羅湖1", "羅湖2", "羅湖3"],
["鹽田1", "鹽田2", "鹽田3"],
["廣州1", "廣州2", "廣州3"],
["惠州1", "惠州2", "惠州3"],
["汕頭1", "汕頭2", "汕頭3"],
];
// 利用頭兩個字相同的特點做個字典就好了
const obj_cz = {};
arr_cz.forEach((arr) => {
obj_cz[arr[0].slice(0, 2)] = arr;
});
console.log(obj_cz);
window.onload = init;
function init() {
//獲取物件
var cs = document.form1.cs;
var dq = document.form1.dq;
var cz = document.form1.cz;
//指定省份和地區中<option>標記的個數
cs.length = arr_cs.length;
dq.length = arr_dq.length;
//回圈將陣列中的資料寫入省份和地區<option>標記中
for (var i = 0; i < cs.length; i++) {
cs.options[i].text = arr_cs[i];
cs.options[i].value = arr_cs[i];
}
for (var i2 = 0; i2 < dq.length; i2++) {
dq.options[i2].text = arr_dq[i2];
dq.options[i2].value = arr_dq[i2];
}
//修改省份和地區串列的默認選項
var index = 0;
cs.selectedIndex = index;
dq.selectedIndex = index;
//指定地區和城鎮中<option>的個數
dq.length = arr_dq[index].length;
cz.length = arr_cz[index].length;
//回圈將陣列中的資料寫入地區和城鎮<option>標記中
for (var j = 0; j < arr_dq[index].length; j++) {
dq.options[j].text = arr_dq[index][j];
dq.options[j].value = arr_dq[index][j];
}
for (var j2 = 0; j2 < arr_cz[index].length; j2++) {
cz.options[j2].text = arr_cz[index][j2];
cz.options[j2].value = arr_cz[index][j2];
}
}
function ejld(index) {
//選擇物件
var dq = document.form1.dq;
//修改省份串列的選擇項
cs.selectedIndex = index;
//指定地區中<option>標記的個數
dq.length = arr_dq[index].length;
//將回圈陣列中的資料寫入地區和城鎮<option>標記中
for (var j = 0; j < arr_dq[index].length; j++) {
dq.options[j].text = arr_dq[index][j];
dq.options[j].value = arr_dq[index][j];
}
}
function sjld(index) {
var dqName = document.form1.dq.value.slice(0,2);
//選擇物件
var cz = document.form1.cz;
//修改地區串列的選擇項
dq.selectedIndex = index;
//指定城鎮中<option>標記的個數
cz.length = obj_cz[dqName].length;
//將回圈陣列中的資料寫入城鎮<option>標記中
for (var j2 = 0; j2 < obj_cz[dqName].length; j2++) {
cz.options[j2].text = obj_cz[dqName][j2];
cz.options[j2].value = obj_cz[dqName][j2];
}
}
</script>
<body>
<form name="form1" method="post" action="">
省份：<select
name="cs"
id="cs"
onchange="ejld(this.selectedIndex)"
></select>
地區：<select
name="dq"
id="dq"
onchange="sjld(this.selectedIndex)"
></select>
城鎮:
<select name="cz" id="cz"></select>
</form>
</body>
</html>
uj5u.com熱心網友回復：
可是我點省的時候，第三框沒有復原uj5u.com熱心網友回復：
這個不應該用id,pid,name Json陣列的格式做更簡單？uj5u.com熱心網友回復：
這個最簡單的解決辦法是：
在ejld()的內部首行添加init()的呼叫。
function ejld(index){
init();
//其他代碼...............
}
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name="form1" method="post" action="">
省份：<select name="cs" id="cs" onchange="ejld(this.options[this.selectedIndex].value)"></select>
地區：<select name="dq" id="dq" onchange="sjld(this.options[this.selectedIndex].value)"></select>
城鎮: <select name="cz" id="cz"></select>
</form>
<script type="text/javascript">
const $ = id => document.getElementById(id)
const getChildrenByPId = id => {
return data.filter(obj => obj.pid === id)
}
const initProvince = data => {
let $cs = $("cs")
let provinces = getChildrenByPId(null)
$cs.length = provinces.length
for (let i = 0; i < provinces.length; i++) {
$cs.options[i].text = provinces[i].name
$cs.options[i].value = provinces[i].id
}
ejld(provinces[0].id)
let regions = getChildrenByPId(provinces[0].id)
sjld(regions[0].id)
}
const ejld = id => {
let $dq = $("dq")
let regions = getChildrenByPId(parseInt(id))
$dq.length = regions.length
for (let i = 0; i < regions.length; i++) {
$dq.options[i].text = regions[i].name
$dq.options[i].value = regions[i].id
}
sjld(regions[0].id)
}
const sjld = id => {
let $cz = $("cz")
let towns = getChildrenByPId(parseInt(id))
$cz.length = towns.length
for (let i = 0; i < towns.length; i++) {
$cz.options[i].text = towns[i].name
$cz.options[i].value = towns[i].id
}
}
let data = [
{ id: 102, name: "朝陽區", pid: 13 },
{ id: 13, name: "東城3", pid: 1 },
{ id: 1, name: "北京市", pid: null },
{ id: 544, name: "寶山1", pid: 54 },
{ id: 54, name: "寶山區", pid: 5 },
{ id: 551, name: "長寧1", pid: 55 },
{ id: 552, name: "長寧2", pid: 55 },
{ id: 55, name: "長寧區", pid: 5 },
{ id: 5, name: "上海市", pid: null },
]
initProvince(data)
</script>
</body>
</html>
uj5u.com熱心網友回復：
或者 {name:'福建',child:['福州','廈門']} 這種方式uj5u.com熱心網友回復：
這個資料結構不好，增加減少什么的維護起來都太麻煩了。多級的下拉串列可以參考：Knockout.js生成無限級的關聯select下拉串列
uj5u.com熱心網友回復：
使用elementUI,里面有現成的級聯選擇框，哪里亮了點哪里...轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/17048.html
標籤：JavaScript