ホームページ > 記事 > ウェブフロントエンド > JavaScriptによる3階層連携の簡単実装
JavaScriptによる3階層連携の簡単実装
- 韦小宝オリジナル
- 2018-03-10 11:55:063802ブラウズ
実際の JavaScript プロジェクト開発では、州や都市の選択、商品の 3 段階の分類の選択など、3 段階の連携が必要になることがよくあります。今日は、JavaScript が 3 レベルのリンクを実装する方法を説明し、JavaScript のソース コードを共有します。 3 レベルのリンクを実装するための JavaScript に慣れていない場合は、一緒に見てみることができます。
知識ポイント:
1. json.parse() は、json 形式の文字列をオブジェクトに変換します。 json.stringify() は、オブジェクトを json 形式の文字列に変換します。
2. 重要な属性 selectedIndex: ドロップダウン リストで選択されたオプションのインデックス番号を返します。
3. onchange イベント
以下はコードです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select id="province">
<!-- <option>北京</option>
<option>天津</option> -->
</select>
<select id="city"></select>
<select id="count"></select>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript">
var province = document.getElementById("province");
var city = document.getElementById("city");
var count = document.getElementById("count");
var chinaArea = JSON.parse(chinaArea);//将字符串格式的json数据转换成对象
// var chinaArea = eval("("+chinaArea+")");
// var chinaArea = new Function("return " + chinaArea)();
//1.遍历省份
var provinceList = chinaArea.china.province;//数组
for(var i = 0 ; i < provinceList.length; i++) {
var option = document.createElement("option");
option.innerHTML = provinceList[i]["-name"];
province.appendChild(option);
}
province.onchange = function() {
//选择省份之后，市区跟着变化
cityData();
countData();
}
cityData();
//市区的数据填充
var sIndex = 0;
var cityIndex = 0;
function cityData() {
//清除原来的市区信息
city.innerHTML = "";
//2.遍历市区
sIndex = province.selectedIndex;//设置或返回下拉列表备选选项的索引号。
for(var j = 0; j < provinceList[sIndex].city.length;j++) {
var option = document.createElement("option");
option.innerHTML = provinceList[sIndex].city[j]["-name"];
city.appendChild(option);
}
}
//县区数据填充
function countData() {
//清除原来的县区信息
count.innerHTML = "";
//
cityIndex = city.selectedIndex;
var countList = chinaArea.china.province[sIndex].city[cityIndex].county;
for(var k = 0; k < countList.length; k++) {
var option = document.createElement("option");
option.innerHTML = countList[k]["-name"];
count.appendChild(option);
}
}
city.onchange = function() {
countData();
}
countData();
</script>
</body>
</html> ソースコードとナレッジポイントをご覧ください。自分で書いてみて知識を強化してください。
関連推奨事項:
以上がJavaScriptによる3階層連携の簡単実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。