js實現省份、城市的級聯選擇

阿新 • • 發佈：2019-01-28

JS實現省份、城市的級聯選擇

實現省份、城市的級聯選擇，可以用純JS實現，當然也可以使用jquery實現，下面就講一下如何用純javascript實現。
其實實現JS這個很簡單，有兩點需要注意：
1、對省份的下拉框的onchange事件進行監聽，一旦省份被改變，那麼就去xml資原始檔裡獲取對應的城市，建立新的option節點，將之掛載在城市節點下。
2、有個地方需要注意，在監聽事件裡，首先需要先刪除除city下第一個子節點外的所有的option節點，這是清除上一次的選擇資訊。
3、在清除上次選擇的城市的時候，需要注意獲得的城市節點陣列的長度是不斷變化的。
程式碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html>
  <head>
    <title>js-9.html</title>
    <script type="text/javascript">
    window.onload=function(){
        var provinceNode=document.getElementById('province');
        provinceNode.onchange=function(){
            //清除city節點的所有子節點（除第一個節點）
            var cityNode=document.getElementById('city' 
);
            var cityNodeOptions=cityNode.getElementsByTagName('option');
            var len=cityNodeOptions.length;
            for(var i=1;i<len;i++){
                //每次都清除第2個，因為陣列cityNodeOptions的長度是動態變化的
                cityNode.removeChild(cityNodeOptions[1]);
                }
            var 
 provinceVal=this.value;
            if(provinceVal==null){
                return false;
                }
            //載入city.xml檔案
            var xmlDoc=parseXml('cities.xml');
            //使用XPATH技術，在xml中查詢匹配的province節點
            var provinceEles = xmlDoc.selectNodes("//province[@name='" 
                                                   + provinceVal + "']");
            var cityNodes=provinceEles[0].getElementsByTagName('city');
            //遍歷city，得到每個文字值，建立新的節點並新增
            for(var i=0;i<cityNodes.length;i++){
                var text=cityNodes[i].firstChild.nodeValue;
                var addNodeOption=document.createElement('option');
                var addNodeText=document.createTextNode(text);
                addNodeOption.appendChild(addNodeText);
                //將新節點掛載到city節點下
                cityNode.appendChild(addNodeOption);
              }
            }
        }

    function parseXml(fileName){
        //IE 核心的瀏覽器
        if (window.ActiveXObject) {
            //建立 DOM 解析器
            var doc = new ActiveXObject("Microsoft.XMLDOM");
            doc.async = "false";
            //載入 XML 文件, 獲取 XML 文件物件
            doc.load(fileName);
            return doc;
        }
    }

   </script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
   <select id="province">
      <option value="">請選擇...</option>
      <option value="河北省">河北省</option>
      <option value="遼寧省">遼寧省</option>
      <option value="山東省">山東省</option>
   </select>
   <select id='city'>
     <option value="">請選擇...</option>
   </select>
  </body>

</html>

所使用的資原始檔 cityes.xml如下：

<?xml version="1.0" encoding="GB2312"?>
<china>

    <province name="河北省">
        <city>石家莊</city>
        <city>邯鄲</city>
        <city>唐山</city>
        <city>張家口</city>
        <city>廊坊</city>
        <city>保定</city>
        <city>承德</city>
    </province>

    <province name="遼寧省">
        <city>瀋陽</city>
        <city>大連</city>
        <city>鞍山</city>
        <city>撫順</city>
        <city>鐵嶺</city>
    </province>

    <province name="山東省">
        <city>濟南</city>
        <city>青島</city>
        <city>威海</city>
        <city>煙臺</city>
        <city>濰坊</city>
    </province>


</china>

js實現省份、城市的級聯選擇

JS實現省份、城市的級聯選擇

js實現省份、城市的級聯選擇

用原生js實現ajax、jsonp

利用js實現全、反選、全不選功能(check)

vue+element ui專案總結點（一）select、Cascader級聯選擇器、encodeURI、decodeURI轉碼解碼、一級mockjs用法、路由懶載入三種方式

vue+element ui項目總結點（一）select、Cascader級聯選擇器、encodeURI、decodeURI轉碼解碼、一級mockjs用法、路由懶加載三種方式

js實現省、市、區的三級聯動

js實現移動端省市區三級聯動選擇器（附原始碼）

ArcGIS API for js 實現點、線、面等圖形的繪畫

原生JS實現AJAX、JSONP及DOM載入完成事件

基於MVC4+EasyUI的Web開發框架經驗總結（7）--實現省份、城市、行政區三者聯動

arcgis for js 實現點、線、面、手動線、手動面緩衝區分析功能

js實現複製、貼上

HTML的radio單選按鈕實現男、女性別只能選擇一個

原生JS實現AJAX、JSONP及DOM載入完成事件，並提供對應方法

基於svg.js實現對圖形的拖拽、選擇和編輯操作

js的二級聯動實現省份城市的選擇

js實現復選框的全選、全部選和反選

JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系？jQuery中的text()、html()和val()

html file控件選擇文件後立即預覽 js實現

select默認選中項顏色為灰色，選擇後變為黑色（js實現）

js實現省份、城市的級聯選擇

JS實現省份、城市的級聯選擇

相關推薦