js实现省份、城市的级联选择

JS实现省份、城市的级联选择

实现省份、城市的级联选择,可以用纯JS实现,当然也可以使用jquery实现,下面就讲一下如何用纯javascript实现。
其实实现JS这个很简单,有两点需要注意:
1、对省份的下拉框的onchange事件进行监听,一旦省份被改变,那么就去xml资源文件里获取对应的城市,创建新的option节点,将之挂载在城市节点下。
2、有个地方需要注意,在监听事件里,首先需要先删除除city下第一个子节点外的所有的option节点,这是清除上一次的选择信息。
3、在清除上次选择的城市的时候,需要注意获得的城市节点数组的长度是不断变化的。
代码如下:


<html>
  <head>
    <title>js-9.htmltitle>
    <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//每次都清除第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;ivar 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如下:


<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>    

你可能感兴趣的:(java-web)