[原创]使用XML数据的省市联动下拉选框

主题：[原创]使用XML数据的省市联动下拉选框

圪圪 [专家分：5150] 发布于 2004-07-05 13:59:00

应论坛里芊寻妹妹的要求，我写了这个小程序
包括三个文件：
xmldom.js :程序文件，各个函数都有详细的注释
test.html :测试页面，调用方式参考这个页面
city.xml :省市数据文件，太大了，不贴出来，需要的跟我联系

本帖地址： http://bbs.pfan.cn/post/44284.html

回复列表（共5个回复）

沙发

圪圪 [专家分：5150] 发布于 2004-07-05 14:00:00

一、XMLDOM.JS

////////////////////////////////////////////////////
//     用 DOM 操作XML数据和SELECT控件公用函数          //
//   圪圪                                          //
//   2004年6月24日 15:19:47                          //
////////////////////////////////////////////////////
/*****************************************************************************************
    ClearDropDownList(目标ID，是否保留第一个)
*****************************************************************************************/
function ClearDropDownList(strDest,bolLeaveFirst)
{
    var oSel=document.all(strDest);
    if(oSel==null || oSel.tagName.toLowerCase()!='select'){
        alert('名称为'+strDest+'的SELECT控件不存在！\n'+oSel.tagName);
        return;}
    var iLength=oSel.options.length;
    if(bolLeaveFirst)
        iTmp=1;
    else
        iTmp=0;
    for(iCnt=iLength-1;iCnt>=iTmp;iCnt--)
        oSel.options.remove(iCnt);
    oSel=null;
}
/*****************************************************************************************
    NODES GetXMLNodeList(XML文件路径,XPATH选择器)
    如：
        GetXMLNodeList("/test.xml","//COUNTRY[@CODE='1236']'");
*****************************************************************************************/
function GetXMLNodeList(strXMLFile,strXPathFilter){
    var oDom=new ActiveXObject("Microsoft.XMLDOM");
    oDom.async=false;
    oDom.load(strXMLFile);
    if(oDom.parseError.Code==0){
        alert('装载XML文档 '+strXMLFile+' 出错了！');
        oDom=null;
        return null;
    }else{
        var nodesTemp=oDom.documentElement.selectNodes(strXPathFilter);
        oDom=null;
        return nodesTemp;
    }
}
/*****************************************************************************************
    LoadDropDownList(Nodes集合，Value字段，Text字段，目标ID，是否清除，是否保留第一个,默认选中的值)
    如：
     <Item ID="340825" NAME="安徽省太湖县" />
     LoadDropDownList (colNodes,'ID','NAME',selCitu,true,true);
*****************************************************************************************/
function LoadDropDownList(colNodes,tagValue,tagText,strDest,bolClear,bolLeaveFirst,defaultSelectedValue)
{
    var oSel=document.all(strDest);
    if(oSel==null || oSel.tagName.toLowerCase()!='select'){
        alert('名称为'+strDest+'的SELECT控件不存在！\n'+oSel.tagName);
        oSel=null;
        return;}
    var iLength=oSel.options.length;
    var iCnt,iTmp;
    if(bolClear){
        if(bolLeaveFirst)
            iTmp=1;
        else
            iTmp=0;
        for(iCnt=iLength-1;iCnt>=iTmp;iCnt--)
            oSel.options.remove(iCnt);
    }
    var opnTemp;
    for(iCnt=0;iCnt<colNodes.length;iCnt++){
        opnTemp=document.createElement("OPTION");
        opnTemp.setAttribute("value",colNodes[iCnt].getAttribute(tagValue));
        opnTemp.setAttribute("text",colNodes[iCnt].getAttribute(tagText));
        oSel.options.add(opnTemp);
        if(defaultSelectedValue==opnTemp.value) oSel.selectedIndex=iCnt+1;
    }
    if(bolLeaveFirst)
        if(oSel.selectedIndex<1) oSel.selectedIndex=1;
    opnTemp=null;
    oSel=null;
}

板凳

圪圪 [专家分：5150] 发布于 2004-07-05 14:00:00

二、test.html

<?xml version="1.0" encoding="gb2312" standalone="no" ?>
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="pragma" content="no-cache" />
<script language="JavaScript" src="xmldom.js"></script>
<style type="text/css">

</style>
<script language="JavaScript">

</script>
<title>测试省市菜单联动</title>
</head>
<body>
                      <SELECT name="Province" onchange="javaScript: LoadDropDownList(GetXMLNodeList('City.xml','//PROVINCE[@CODE=\''+this.value+'\']/CITY'),'CODE','NAME','City',true,true,'440300');">
                        <option value='000000'>=选择省份=</option>
                      </SELECT>
                      城市：
                      <select name="City">
                        <option value='000000'>=选择城市=</option>
                      </select>
                      <script language="JavaScript">
                        
                        </script>
</body>
</html>

3 楼

圪圪 [专家分：5150] 发布于 2004-07-05 14:01:00

三、city.xml(只有前面一部分)
<?xml version="1.0" ?>
<PROVINCES COUNT="34">
  <PROVINCE CODE="110000" NAME="北京市" COUNT="7">
    <CITY CODE="110001" NAME="北京市"></CITY>
    <CITY CODE="110221" NAME="昌平县"></CITY>
    <CITY CODE="110224" NAME="大兴县"></CITY>
    <CITY CODE="110226" NAME="平谷县"></CITY>
    <CITY CODE="110227" NAME="怀柔县"></CITY>
    <CITY CODE="110228" NAME="密云县"></CITY>
    <CITY CODE="110229" NAME="延庆县"></CITY>
  </PROVINCE>
  <PROVINCE CODE="120000" NAME="天津市" COUNT="8">
    <CITY CODE="120001" NAME="天津市"></CITY>
    <CITY CODE="120221" NAME="宁河县"></CITY>
    <CITY CODE="120222" NAME="武清县"></CITY>
    <CITY CODE="120223" NAME="静海县"></CITY>
    <CITY CODE="120224" NAME="宝坻县"></CITY>
    <CITY CODE="120225" NAME="蓟县"></CITY>
    <CITY CODE="120901" NAME="天津开发区"></CITY>
    <CITY CODE="120902" NAME="天津港保税区"></CITY>
  </PROVINCE>
  <PROVINCE CODE="130000" NAME="河北省" COUNT="155">
    <CITY CODE="130100" NAME="石家庄市"></CITY>
    <CITY CODE="130121" NAME="井陉县"></CITY>
    <CITY CODE="130123" NAME="正定县"></CITY>
    <CITY CODE="130124" NAME="栾城县"></CITY>
    <CITY CODE="130125" NAME="行唐县"></CITY>
    <CITY CODE="130126" NAME="灵寿县"></CITY>
    <CITY CODE="130127" NAME="高邑县"></CITY>
    <CITY CODE="130128" NAME="深泽县"></CITY>
    <CITY CODE="130129" NAME="赞皇县"></CITY>
    <CITY CODE="130130" NAME="无极县"></CITY>
    <CITY CODE="130131" NAME="平山县"></CITY>
    <CITY CODE="130132" NAME="元氏县"></CITY>
    <CITY CODE="130133" NAME="赵县"></CITY>
    <CITY CODE="130181" NAME="辛集市"></CITY>
    <CITY CODE="130182" NAME="藁城市"></CITY>
    <CITY CODE="130183" NAME="晋州市"></CITY>
    <CITY CODE="130184" NAME="新乐市"></CITY>
    <CITY CODE="130185" NAME="鹿泉市"></CITY>
    <CITY CODE="130200" NAME="唐山市"></CITY>
    <CITY CODE="130221" NAME="丰润县"></CITY>
    <CITY CODE="130223" NAME="滦县"></CITY>
    <CITY CODE="130224" NAME="滦南县"></CITY>
    <CITY CODE="130225" NAME="乐亭县"></CITY>
    <CITY CODE="130226" NAME="迁安市"></CITY>
    <CITY CODE="130227" NAME="迁西县"></CITY>
    <CITY CODE="130229" NAME="玉田县"></CITY>
    <CITY CODE="130230" NAME="唐海县"></CITY>
    <CITY CODE="130231" NAME="汉沽"></CITY>
    <CITY CODE="130232" NAME="芦台"></CITY>
    <CITY CODE="130281" NAME="遵化市"></CITY>
    <CITY CODE="130282" NAME="丰南市"></CITY>
    <CITY CODE="130300" NAME="秦皇岛市"></CITY>
    <CITY CODE="130321" NAME="青龙满族自治县"></CITY>
    <CITY CODE="130322" NAME="昌黎县"></CITY>
    <CITY CODE="130323" NAME="抚宁县"></CITY>
    <CITY CODE="130324" NAME="卢龙县"></CITY>
    <CITY CODE="130400" NAME="邯郸市"></CITY>
    <CITY CODE="130421" NAME="邯郸县"></CITY>
    <CITY CODE="130423" NAME="临漳县"></CITY>
    <CITY CODE="130424" NAME="成安县"></CITY>
    <CITY CODE="130425" NAME="大名县"></CITY>
    <CITY CODE="130426" NAME="涉县"></CITY>
    <CITY CODE="130427" NAME="磁县"></CITY>
    <CITY CODE="130428" NAME="肥乡县"></CITY>
    <CITY CODE="130429" NAME="永年县"></CITY>
    <CITY CODE="130430" NAME="邱县"></CITY>
  </PROVINCE>
</PROVINCES>

4 楼

圪圪 [专家分：5150] 发布于 2004-07-05 14:03:00

源代码在这里：

http://www.hfpcinfo.net/Down/XML_PCS.rar

5 楼

wqpost [专家分：260] 发布于 2004-07-05 15:28:00

很不错呀！！！！！！呵呵！

我来回复

您尚未登录，请登录后再回复。点此登录或注册

主题：[原创]使用XML数据的省市联动下拉选框

回复列表（共5个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

主题：[原创]使用XML数据的省市联动下拉选框

回复列表 （共5个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

回复列表（共5个回复）