溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js如何實現(xiàn)城市級聯(lián)菜單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。
具體內(nèi)容如下
方法一：用switch方法判斷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function changeCity() {
var x=['牛奶','豆?jié){','油條'];
console.log(x.join(','));
var y=[33,22,66,12];
console.log(y.sort());
//如果選擇的是河南 在城市中: 洛陽 ，駐馬店
//如果選擇的是河北 在城市中: 石家莊 ，保定
var province = document.getElementById('selProvince');
var city = document.getElementById('selCity');
//在添加城市前，先清空上一次添加的城市
city.length = 1;
switch (province.value) {
case '河南省':
var op1 = new Option('洛陽', '洛陽');
var op2 = new Option('駐馬店', '駐馬店');
city.add(op1, null);
city.add(op2, null);
break;
case '河北省':
var op1 = new Option('石家莊', '石家莊');
var op2 = new Option('保定', '保定');
city.add(op1, null);
city.add(op2, null);
break;
}
}
</script>
</head>
<body>
<form action="" name="myform">
<select id="selProvince" onchange="changeCity( )">
<option>--選擇省份--</option>
<option value="河南省">河南省</option>
<option value="河北省">河北省</option>
</select>
<select id="selCity">
<option>--選擇城市--</option>
</select>
</form>
</body>
</html>方法二：用if進行判斷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function chagecity() {
var citylist = [];
citylist['四川省'] = ['成都市', '郫都區(qū)'];
citylist['廣東省'] = ['深圳市', '東莞市'];
var provinceV = document.getElementById("province").value;
var city = document.getElementById("city");
city.length = 1; //清除當(dāng)前city中的選項
// for (var i in citylist){
// if (i == provinceV){
// for (var j in citylist[i]){
// citylist.add(new Option(citylist[i][j],citylist[i][j]),null);
// }
// }
// }
for (var i in citylist) {
if (i == provinceV) {//判斷i是不是等于province中的值
for (var j in citylist[i]) {//遍歷citylist數(shù)組
var op = new Option(citylist[i][j], citylist[i][j]);//把定義好的數(shù)據(jù)添加到city中
city.add(op, null);
}
}
}
}
</script>
</head>
<body>
<form action="">
<select name="" id="province" onchange="chagecity()">
<option value="四川省">四川</option>
<option value="廣東省">廣東</option>
</select>
<select id="city">
<option value="選擇城市">選擇城市</option>
</select>
</form>
</body>
</html>以上是“js如何實現(xiàn)城市級聯(lián)菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼