2. 程式人生 > >js基礎學習之兩級聯動

js基礎學習之兩級聯動

阿新 • • 發佈：2019-02-13

    本來最近在學習ajax,學著學著學到html——js——ajax,踏踏實實學習真好，佈置於在做專案的時候，看不懂這個，看不懂那個，今天就跟大家談談這個小demo，兩級聯動，其實三級聯動也好做，有空再做吧，自己以後要是用到了，也能看看。當然現在有好多的人或者公司已經這個玩意，寫了一遍有一遍，完善了一遍又一遍，學習或者以後工作，總不能拿別人的就用，處理問題，也搞不定那個最煩人，還是自己瞭解一點好。

  • 效果圖

    首先這個做的比較簡陋，我只是想表達關於這個二級聯動的實現方法，對於入門級的人也挺好

二、實現原始碼

//頁面程式碼

<body>

     <

div>

           <table>

                <tr>

                     <td>所在省份</td>

                     <td><select id="province" name="province">

                                <option value="">請選擇省....</option>

                          </

select>

                     </td>

                     <td>所在市區</td>

                     <td><select id="city" name="city">

                                <option value="">請選擇市.....</option>

                          </select>

                     </

td>

                </tr>

           </table>

     </div>

</body>

<script language="JavaScript">

     window.onload = function() {

           //頁面載入的時候開始讀取xml檔案

           var xmlDoc = getxmlDoc("Provinces.xml");

           var provinceXmlElements = xmlDoc.getElementsByTagName("Province");

           var provinceElement = document.getElementById("province");

           for (var i = 0; i < provinceXmlElements.length; i++) {

                var provinceXmlElement = provinceXmlElements[i];

                var nameAttr = provinceXmlElement.getAttribute("ProvinceName");

                var provinceOptions = document.createElement("option");

                var optionsText = document.createTextNode(nameAttr);

                provinceOptions.setAttribute("value", nameAttr);

                provinceOptions.appendChild(optionsText);

                provinceElement.appendChild(provinceOptions);

           }

           //當下拉框中值改變時

           document.getElementById("province").onchange = function() {

                //當下拉列表改變時，獲取選中的值

                var htmlValue = this.value;

                var cityElement = document.getElementById("city");

                var oldOptionElements = cityElement.getElementsByTagName("option");

                for (var i = oldOptionElements.length - 1; i > 0; i--) {

                     cityElement.removeChild(oldOptionElements[i]);

                }

                //讀取配置檔案

                var xmlDoc = getxmlDoc("Provinces.xml");

                //獲取所有的省標籤

                var provinceXmlElements = xmlDoc.getElementsByTagName("Province");

                var provinceElement = null;

                //                alert(provinceXmlElements.length);     

                for (var i = 0; i < provinceXmlElements.length; i++) {

                     var provinceXmlElement = provinceXmlElements[i];

                     var nameAttr = provinceXmlElement.getAttribute("ProvinceName");

                     if (nameAttr == htmlValue) {

                          provinceElement = provinceXmlElement;

                     }

                }

                if (provinceElement != null) {

                     var cityXmlElements = provinceElement

                                .getElementsByTagName("city");

                     for (var i = 0; i < cityXmlElements.length; i++) {

                          var cityValue = cityXmlElements[i].firstChild.nodeValue;

                          var optionElement = document.createElement("option");

                          optionElement.setAttribute("cityValue", cityValue);

                          var optionTextElement = document.createTextNode(cityValue);

                          optionElement.appendChild(optionTextElement);

                          cityElement.appendChild(optionElement);

                     }

                }

           }

           /**

            * 跨瀏覽器的解析xml檔案的函式

            * @param {Object} fileXmlName

            */

             function getxmlDoc(xmlFile) {

                 var xmlDoc;

                 if (window.ActiveXObject) {

                     xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE

                     xmlDoc.async = false;

                     xmlDoc.load(xmlFile);

                 }

                 else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐

                     xmlDoc = document.implementation.createDocument('', '', null);

                     xmlDoc.load(xmlFile);

                 }

                 else{ //谷歌

                   var xmlhttp = new window.XMLHttpRequest();

                     xmlhttp.open("GET",xmlFile,false);

                     xmlhttp.send(null);

                     if(xmlhttp.readyState == 4){

                     xmlDoc = xmlhttp.responseXML.documentElement;

                     }

                 }

                 return xmlDoc;

             }

     }

</script>
  • 實現原理

（1）首先準備好xml檔案，省市縣，固定的省對應固定的市，固定的市對應固定的縣。

（2）開始解析你準備好的xml檔案（其實這裡你如果將基礎學的比較紮實，其實讀取xml檔案就是讀取它對應的節點、對應的文字屬性、文字內容，其實xml最初就是想取代html,無奈html越來越火，無法取代，所以xml就開啟了它無盡的配置之路）

指定程式碼：解析xml檔案，在此之前我寫的不支援谷歌和火狐，所以我就上網去找到了相容的xml解析方法（一下就是，可以直接用）

/**

            * 跨瀏覽器的解析xml檔案的函式

            * @param {Object} fileXmlName

            */

             function getxmlDoc(xmlFile) {

                 var xmlDoc;

                 if (window.ActiveXObject) {

                     xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE

                     xmlDoc.async = false;

                     xmlDoc.load(xmlFile);

                 }

                 else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐

                     xmlDoc = document.implementation.createDocument('', '', null);

                     xmlDoc.load(xmlFile);

                 }

                 else{ //谷歌

                   var xmlhttp = new window.XMLHttpRequest();

                     xmlhttp.open("GET",xmlFile,false);

                     xmlhttp.send(null);

                     if(xmlhttp.readyState == 4){

                     xmlDoc = xmlhttp.responseXML.documentElement;

                     }

                 }

                 return xmlDoc;

             }

     }

（2）在頁面載入之前讀取一次xml載入所有的省份，並把所有的省份通過dom技術附加在selected（技術如下：如有疑問請聯絡我），在此處解釋一下關於window.onload = function(){}，只有當頁面中所有資源載入完畢之後，才執行大括號裡面的程式碼

//頁面載入的時候開始讀取xml檔案

           var xmlDoc = getxmlDoc("Provinces.xml");

           var provinceXmlElements = xmlDoc.getElementsByTagName("Province");

           var provinceElement = document.getElementById("province");

           for (var i = 0; i < provinceXmlElements.length; i++) {

                var provinceXmlElement = provinceXmlElements[i];

                var nameAttr = provinceXmlElement.getAttribute("ProvinceName");

                var provinceOptions = document.createElement("option");

                var optionsText = document.createTextNode(nameAttr);

                provinceOptions.setAttribute("value", nameAttr);

                provinceOptions.appendChild(optionsText);

                provinceElement.appendChild(provinceOptions);

           }

以上解決所有省份加入下拉列表

當我們點選不同省份，城市下拉列表顯示該省所屬的城市

解析方法：

        （1）新增監聽事件，獲取省份改變的值；

document.getElementById("province").onchange= function() {   

  var htmlValue = this.value;

}

     （2）同樣通過xml解析出所有省份，改變的值與解析出的某一省份相同，將該省份設定成全域性變數，然後通過該省的名稱獲取其孩子節點（即城市節點）

              //讀取配置檔案

             var xmlDoc = getxmlDoc("Provinces.xml");

             //獲取所有的省標籤

             var provinceXmlElements = xmlDoc.getElementsByTagName("Province");

              //設定全域性變數

             var provinceElement = null;

             //alert(provinceXmlElements.length); 

              //遍歷每一個省份 

             for (var i = 0; i < provinceXmlElements.length; i++) {

                 var provinceXmlElement = provinceXmlElements[i];

                 var nameAttr = provinceXmlElement.getAttribute("ProvinceName");

                 //比對改變值與解析出相同的省份

                   if (nameAttr == htmlValue) {

                     provinceElement = provinceXmlElement;

                 }

             }

     （3）遍歷屬於該省份所有城市節點，並經該節點陣列一個一個新增在城市下拉列表中

if (provinceElement != null) {

                 var cityXmlElements = provinceElement

                         .getElementsByTagName("city");

                 for (var i = 0; i < cityXmlElements.length; i++) {

                     var cityValue = cityXmlElements[i].firstChild.nodeValue;

                     var optionElement = document.createElement("option");

                     optionElement.setAttribute("cityValue", cityValue);

                     var optionTextElement = document.createTextNode(cityValue);

                     optionElement.appendChild(optionTextElement);

                     cityElement.appendChild(optionElement);

                 }

             }

當然目前我還未整理縣和區，所以只做了兩級聯動，其實根本方法與此相同，不過大神們做的更牛逼的聯動，也是我追求的夢想與方向，歡迎批評指點！！！

        （4）當然在每次載入城市之後換其他省份時，我們需要將之前的省份所屬城市刪除

var cityElement = document.getElementById("city");
            var oldOptionElements =      cityElement.getElementsByTagName("option");
            for (var i = oldOptionElements.length - 1; i > 0; i--) {
                cityElement.removeChild(oldOptionElements[i]);
            }

如果有需要省市文件xml的，請下方留言，完全免費！！！

相關推薦

js基礎學習之兩級聯動

    本來最近在學習ajax,學著學著學到html——js——ajax,踏踏實實學習真好，佈置於在做專案的時候，看不懂這個，看不懂那個，今天就跟大家談談這個小demo，兩級聯動，其實三級聯動也好做，有空再做吧，自己以後要是用到了，也能看看。當然現在有好多的人或者公司已經這個

Vue.js 基礎學習之混合mixins

sda itl 實現 var title cte 混合 method ons 混合以一種靈活的方式為組件提供分布復用功能。混合對象可以包含任意的組件選項。當組件使用了混合對象時，混合對象的所有選項將被“混入”組件自己的選項中。 當混合對象與組件包含同名選項時，這些選項將以適

Vue.js基礎學習之npm 安裝

最近在學習.net core  的同時也在學習前端vue.js 。 從沒有接觸過一個真正的前端框架，這次打算從開始認真的學習一下。寫部落格的目的就是做下筆記。 安裝npm 下載後，雙擊安裝 。 一路next，至到安裝成功 。 開啟CMD，檢查是否正常

Vue.js基礎學習之 搭建vue.js 專案框架。

還是那就俗話，寫部落格的原因就是為記筆記。其實本人也在word 文件上，也記了，但是怕丟。所以寫成部落格，當自己再需要的時候可以檢視。本人主要是c#，asp.net。為了能一人獨立開發一個完整的專案，所以學習一套前端的架構。有錯誤的地方，歡迎大家指出。不說廢話，趕緊利索的寫實

Js基礎學習之 -- DOM相容 根據標籤、類名獲取節點函式封裝

Js基礎學習之 --  DOM相容 根據標籤、類名獲取節點函式封裝                  1.    作用：所有類選擇器名為cName的標籤       引數：類選擇器的名（class名）  返回值：所有類選擇器名為cName的標籤function get

Js基礎學習之-- 利用GET方法實現ajax請求

function getAJAX(fn,url){ var xhr = createXHR(); xhr.open("GET",url,true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){//非同步請求時的

Js基礎學習之-- 利用正則表示式驗證 模擬註冊介面

註冊介面 要求：使用者名稱只能是字母或者數字或者下劃線，不能以數字開頭，使用者名稱長度在6到20之間 密碼兩次驗證必須一致，使用者名稱密碼不能為空。 <!DOCTYPE html> <html> <head> <meta h

10分鐘快速精通rollup.js——前置學習之基礎知識篇

前言 本文是《10分鐘快速精通rollup.js——Vue.js原始碼打包過程深度分析》的前置學習教程，講解的知識點以理解Vue.js打包原始碼為目標，不會做過多地展開。教程將保持rollup.js系列教程的一貫風格，大部分知識點都將提供可執行的程式碼案例和實際執行的結果，讓大家通過教程就可以看到實現效果，

JS練習：兩級聯動

級聯 create clas 得到 當前 動態 hid chang 技術分享 代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Web 基礎學習之 JS ，迴圈練習

1.判斷閏年  var i; for(i=1980;i<=2016;i++) { if( i % 4 == 0 && i % 100 != 0 || i % 400 == 0) document.write( i + " "); } 2.九

【.net基礎】--DropDownList控制元件：兩級聯動

   　最近學習Asp.Net，發現很多控制元件都很有意思，例如：Canlender，AdRotator等。以前只知道有這樣的頁面效果，但是對這些控制元件瞭解並不多。不怕不知道，就怕不知道。 　　

js 兩級聯動

    </form></body></html><script type="text/javascript">    var arr_province = ["請選擇省/城市","北京市","上海市","天津市","重慶市","深圳市","廣東省"];   

Python基礎學習之標識符

數字 其他 符號 lin port 分用 xxx rom code 1、合法的Python標識符 　　Python標識符字符串規則和其他大部分用C編寫的高級語言相似： 第一個字符必須是字母或下劃線（_） 剩下的字符可以是字母和數字或下滑線 大小寫敏感 　　標識符不能以數

JS基礎學習2

算數運算 clas asc alt javascrip 程序 表達 相等 fine 1.CMAScript 運算符 算數運算符 遞增（++）、遞減（--） var i=15; console.log(i++);

JS基礎學習3

++ pytho cat 代碼塊 return語句 控制語句 其他 實現 選擇 1.控制語句 （1）if控制語句 if-else基本格式 if (表達式){ 語句１; ...... }else{ 語句２; ..... } 功能說明 如果表達式的值為true則執行語句1,

對JS基礎學習的重新理解

運行 字符類型 ima 進行 其中 精度 一點 image 小數點 　　　　　　　　　　JS串講 數據類型： float：單精度小數 （小數點後面的位數相對來說要小一點） double：雙精度小數（小數點後面的位數多的話用這個） decimal：小數（如果小數點

Django基礎學習之Cookie 和 Sessions 應用

ima ges disco ttr 實現 保存 urn 傳遞 nwr 在Django裏面，使用Cookie和Session看起來好像是一樣的，使用的方式都是request.COOKIES[XXX]和request.session[XXX],其中XXX是您想要取得的東西的ke

Java web基礎學習之開發環境篇

work eclipse 軟件 ase java lips pda down ava Tomcat + Eclipse添加Java EE插件 因為之前進行Java SE學習已經配置了JDK，安裝了Eclipse for Java SE，所以選擇了在Eclipse上添加插件的

js基礎學習

urn 不同 tostring scrip 實例 瀏覽器 函數對象 函數調用 基礎 js視頻:53：如果函數中return語句後邊不跟任何值就相當於返回一個undefined， 如果函數中不寫return，則也會返回undefined.56:立即執行函數：函數定義完立即被執

Python基礎學習之函數

sans 使用 默認 默認參數 int fail spa 執行函數 數列 1.函數的定義： def 函數名(參數)： 　　函數體 　　返回值 舉例：def fuction1(name): 　　if name =‘Alex‘: 　　print(‘Success‘)