州と都市の垂直リストメニューの動的作成を DOM で実装する JavaScript メソッド

ホームページ

ウェブフロントエンド

jsチュートリアル

州と都市の垂直リストメニューの動的作成を DOM で実装する JavaScript メソッド_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:59 PM

dom javascript 動的に作成される肖像画

この記事の例では、JavaScript を使用して DOM で州と都市の垂直リストメニューを動的に作成する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建纵向列表</title>
<style type="text/css">
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px;border:1px solid #ccc; border-bottom:none; }
#menu ul li.current ul { display:block;} 
#menu ul li ul li{text-align:center;}  /*设置城市内容居中*/
</style>
<script type="text/javascript">
var provs = { "江西省": ["南昌市", "景德镇", "九江", "鹰潭", "萍乡", "新馀", "赣州", "吉安", "宜春", "抚州", "上饶"],
  "福建省": ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
  "河北省": ["石家庄", "邯郸", "邢台", "保定", "张家口", "承德", "廊坊", "唐山", "秦皇岛", "沧州", "衡水"],
  "四川省": ["成都市", "自贡市", "攀枝花市", "泸州市", "德阳市", "绵阳市", "广元市", "遂宁市", "内江市", "乐山市", "南充市", "眉山市", "宜宾市", "广安市", "达州市", "雅安市", "巴中市", "资阳市", "阿坝藏族羌族自治州", "甘孜藏族自治州", "凉山彝族自治州"],
  "山西省": ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"],
  "内蒙古": ["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市", "兴安盟", "锡林郭勒盟", "阿拉善盟"],
  "海南省": ["海口市", "三亚市"], "重庆市": ["重庆"], 
  "贵州省": ["贵阳市", "六盘水市", "遵义市", "安顺市", "铜仁地区", "黔西南布依族苗族自治州", "毕节地区", "黔东南苗族侗族自治州", "黔南布依族苗族自治州"],
  "甘肃省": ["兰州市", "嘉峪关市", "金昌市", "白银市", "天水市", "武威市", "张掖市", "平凉市", "酒泉市", "庆阳市", "定西市", "陇南市", "临夏回族自治州", "甘南藏族自治州"],
  "青海省": ["西宁市", "海东地区", "海北藏族自治州", "黄南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉树藏族自治州", "海西蒙古族藏族自治州"],
  "宁夏自治区": ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"]
};
function iniEvent() {
  var provUL = document.getElementById("prov");
  if (provUL) {
    var allli = provUL.getElementsByTagName("li");
    for (i = 0; i < allli.length; i++) {
      node = allli[i];
      node.onmouseover = function () { //鼠标经过时显示层
        this.className = "current";
      }
      node.onmouseout = function () { //鼠标离开时隐藏层
        this.className = this.className.replace("current", "");
      }
    }
  }
}
function loadData() {      
  var provUL = document.getElementById("prov");
  var nIndex = 0;
  for (var key in provs) {
    var provLi = document.createElement("li");
    provLi.id = "provLI" + nIndex;
    provLi.innerHTML = "<a href='#'>" + key + "</a>";
    provUL.appendChild(provLi);    //添加省份li
    //================添加城市========================
    var citys = provs[key];
    if (citys.length > 0) {
      var cityUL = document.createElement("ul");
      var maxLength = 0; //存放最大城市内容的长度，以便后面设置cityUL的最大宽度，达到宽度自适应
      for (var i = 0; i < citys.length; i++) {
        var cityName = citys[i];
        if (cityName.length > maxLength) {
          maxLength = cityName.length; //提取最大长度的城市
        }
        var cityLI = document.createElement("li");
        cityLI.id = "cityLI" + i;
        cityLI.innerHTML = "<a href='#'>" + cityName + "</a>";
        cityUL.appendChild(cityLI);
      }
      if (maxLength <= 6) {
        maxLength = 100;
      }
      else {
        maxLength = maxLength * 20;
        //这里乘以20主要是按一个字20px来算
      }
      maxLength = maxLength + "px"; //加上像素的px后缀
      cityUL.style.width= maxLength; //设置cityUL的最大宽度
      provLi.appendChild(cityUL); //添加城市UL
    }
    nIndex++;
  }
  iniEvent();  //初始化事件
}
</script>
</head>
<body onload ="loadData()">
<div id="menu">
<ul id="prov">
</ul>
</div>  
</body>
</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7637

CakePHP チュートリアル

1391

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

150

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

golang 関数で新しい関数を動的に作成するためのヒント Apr 25, 2024 pm 02:39 PM

Go 言語は、クロージャとリフレクションという 2 つの動的関数作成テクノロジを提供します。クロージャを使用すると、クロージャスコープ内の変数にアクセスでき、リフレクションでは FuncOf 関数を使用して新しい関数を作成できます。これらのテクノロジーは、HTTP ルーターのカスタマイズ、高度にカスタマイズ可能なシステムの実装、プラグイン可能なコンポーネントの構築に役立ちます。

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用