溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js如何實現城市級聯菜單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。
具體內容如下
方法一：用switch方法判斷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function changeCity() {
var x=['牛奶','豆漿','油條'];
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['四川省'] = ['成都市', '郫都區'];
citylist['廣東省'] = ['深圳市', '東莞市'];
var provinceV = document.getElementById("province").value;
var city = document.getElementById("city");
city.length = 1; //清除當前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數組
var op = new Option(citylist[i][j], citylist[i][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如何實現城市級聯菜單”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
