ホームページ > 記事 > ウェブフロントエンド > JavaScript ネイティブコードで実装された単純な州、市、郡の 3 レベルのリンク関数のケーススタディ

JavaScript ネイティブコードで実装された単純な州、市、郡の 3 レベルのリンク関数のケーススタディ

黄舟オリジナル: 2017-05-28 10:25:151512ブラウズ

この記事では、ネイティブJavaScriptによって実装された簡単な省、市、郡の3レベルの連携機能を主に紹介し、JavaScriptイベントの応答と実装を含む完全な例の形式でJavaScript連携メニューの実装方法を分析します。ページ要素の動的な操作に関するテクニックを紹介します。必要な友達は参考にしてください。

この記事では、ネイティブ JavaScript で実装された簡単な州、市、郡の 3 レベルのリンク機能について説明します。参考までに共有します。

フォームを書くときに欠かせないのが3層連携です。例えば、最近はネイティブJavaScriptを検討しています。基本から改善するために、将来的には次のように

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动菜单</title>
<style>
select {
font-family: "萝莉体 第二版";
}
.hide {
display: none;
}
</style>
</head>
<body>
<p>
<select id="province">
<option>-请选择-</option>
</select>
<select id="city" class="hide">
<option>-请选择-</option>
</select>
<select id="area" class="hide">
<option>-请选择-</option>
</select>
</p>
<script>
var provinceList = [&#39;北京市&#39;, &#39;河北省&#39;, &#39;浙江省&#39;];
var cityList = [[&#39;东城区&#39;, &#39;西城区&#39;, &#39;海淀区&#39;], [&#39;廊坊市&#39;, &#39;唐山市&#39;, &#39;石家庄市&#39;, &#39;承德市&#39;], [&#39;杭州市&#39;, &#39;温州市&#39;, &#39;宁波市&#39;, &#39;嘉兴市&#39;, &#39;绍兴市&#39;]];
var areasList = [
[
[&#39;东城区1&#39;, &#39;东城区2&#39;, &#39;东城区3&#39;],
[&#39;西城区1&#39;, &#39;西城区2&#39;, &#39;西城区3&#39;],
[&#39;海淀区1&#39;, &#39;海淀区2&#39;, &#39;海淀区3&#39;]
],
[
[&#39;廊坊市1&#39;, &#39;廊坊市2&#39;, &#39;廊坊市3&#39;, &#39;廊坊市4&#39;],
[&#39;唐山市1&#39;, &#39;唐山市2&#39;, &#39;唐山市3&#39;, &#39;唐山市4&#39;],
[&#39;石家庄市1&#39;, &#39;石家庄市2&#39;, &#39;石家庄市3&#39;, &#39;石家庄市4&#39;],
[&#39;承德市1&#39;, &#39;承德市2&#39;, &#39;承德市3&#39;, &#39;承德市4&#39;]
],
[
[&#39;杭州市1&#39;, &#39;杭州市2&#39;, &#39;杭州市3&#39;, &#39;杭州市4&#39;, &#39;杭州市5&#39;],
[&#39;温州市1&#39;, &#39;温州市2&#39;, &#39;温州市3&#39;, &#39;温州市4&#39;, &#39;温州市5&#39;],
[&#39;宁波市1&#39;, &#39;宁波市2&#39;, &#39;宁波市3&#39;, &#39;宁波市4&#39;, &#39;宁波市5&#39;],
[&#39;嘉兴市1&#39;, &#39;嘉兴市2&#39;, &#39;嘉兴市3&#39;, &#39;嘉兴市4&#39;, &#39;嘉兴市5&#39;],
[&#39;绍兴市1&#39;, &#39;绍兴市2&#39;, &#39;绍兴市3&#39;, &#39;绍兴市4&#39;, &#39;绍兴市5&#39;]
]
];
//1.获取元素
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = document.getElementById("area");
//2.给省的选择框赋值,
// ----使用自执行函数，避免污染全局变量-----
(function () {
for (var i = 0; i < provinceList.length; i++) {
var myOption = document.createElement("option");
myOption.innerHTML = provinceList[i];
//设置value值
myOption.value = i;
province.appendChild(myOption);
}
})();
//3.设置选择省的行为函数
province.onchange = function (e) {
city.style.display = "inline-block"; //设置第二个出现
while (city.children.length > 1) { //当省设置为“请选择”时，移除子元素
city.removeChild(city.lastElementChild);
}
while (area.children.length > 1) { //当市设置为“请选择”时，移除子元素
area.removeChild(area.lastElementChild);
}
if (cityList[this.value]) {//当设置为请选择时不显示列表
for (var i = 0; i < cityList[this.value].length; i++) { //添加市的列表
var myOption = document.createElement("option");
myOption.innerHTML = cityList[this.value][i];
//设置value值
myOption.value = i;
city.appendChild(myOption);
}
}
};
//4.设置选择市的行为函数
city.onchange = function (e) {
area.style.display = "inline-block"; //设置第二个出现
while (area.children.length > 1) { //当市设置为“请选择”时，移除子元素
area.removeChild(area.lastElementChild);
}
if (areasList[province.value][this.value]) {//当设置为"请选择"时不显示列表
for (var i = 0; i < areasList[province.value][this.value].length; i++) { //添加市的列表
var myOption = document.createElement("option");
myOption.innerHTML = areasList[province.value][this.value][i];
area.appendChild(myOption);
}
}
}
</script>
</body>
</html>

の

jquery

バージョンを作成します。

以上がJavaScript ネイティブコードで実装された単純な州、市、郡の 3 レベルのリンク関数のケーススタディの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript コールバック関数の概念理解と使用法分析次の記事：JavaScript コールバック関数の概念理解と使用法分析

続きを見る

JavaScript ネイティブ コードで実装された単純な州、市、郡の 3 レベルのリンク関数のケース スタディ

関連記事

JavaScript ネイティブコードで実装された単純な州、市、郡の 3 レベルのリンク関数のケーススタディ