欢迎光临
我们一直在努力

省市二级联动js和jquery版,调用XML,支持chrome,完美可用

有许多时候我们需要用到二级联动,至于更多级的不在这儿讨论了。

首先们们建立两个文件city.html和cities.xml直接上带码,拷贝即可用:

1)city.html的文件代码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级省市关联</title>
</head>
<body>
<select id="province" name="province">
    <option value="">请选择....</option>
    <option value="吉林省">吉林省</option>
    <option value="辽宁省">辽宁省</option>
    <option value="山东省">山东省</option>
</select>
<select id="city" name="city">
    <option value="">请选择.....</option>
</select>
<script>
    var provinceNode = document.getElementById('province');
    provinceNode.onchange = function () {
        //1、获取页面中选中的省份名称
        var provinceValue = provinceNode.value;

        //2、解析XML
        var docXml = parseXML("cities.xml");

        //3、遍历xml中的省份
        var provinceXmlElements = docXml.getElementsByTagName("province");

        //清空
        var cityElements = document.getElementById("city");
        var optionsOld = cityElements.getElementsByTagName("option");
        for (var z = optionsOld.length - 1; z > 0; z--) {
            cityElements.removeChild(optionsOld[z]);
        }

        for (var i = 0; i < provinceXmlElements.length; i++) {
            var provinceXmlElement = provinceXmlElements[i];
            var provinceXmlValue = provinceXmlElement.getAttribute("name");
            //4、判断页面中的省份与xml文件中的省份是否一致
            if (provinceValue == provinceXmlValue) {
                //5、若一致,则遍历该省份对应的所有城市信息
                var cityXmlElements = provinceXmlElement.getElementsByTagName("city");
                for (var j = 0; j < cityXmlElements.length; j++) {
                    var cityXmlElement = cityXmlElements[j];
                    var cityXmlValue = cityXmlElement.firstChild.nodeValue;
                    //6、插入到页面下拉选项中
                    var optionElement = document.createElement("option");
                    optionElement.setAttribute("value", cityXmlValue);
                    var cityText = document.createTextNode(cityXmlValue);
                    optionElement.appendChild(cityText);

                    cityElements.appendChild(optionElement);
                }
            }
        }
    }

    /**
     * 跨浏览器解析xml
     * @param {Object}
     * @returns {fileXmlName}
     */
    function parseXML(file) {
        var xmlDoc = null;
        try {//Internet Explorer  创建一个空的xml文档
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;//设置加载XML方式,关闭异步加载xml,使用同步方式加载XML文档
            xmlDoc.load(file); //加载xml文件
        }
        catch (e) {
            try {//Firefox, Mozilla, Opera, 创建一个空的xml文档
                xmlDoc = document.implementation.createDocument("", "", null);
                xmlDoc.async = false;//设置加载XML方式,关闭异步加载xml,使用同步方式加载XML文档
                xmlDoc.load(file); //加载xml文件
            }
            catch (e) {
                try {//Google Chrome
                    var xmlhttp = new window.XMLHttpRequest();
                    xmlhttp.open("get", file, false);
                    xmlhttp.send(null);
                    xmlDoc = xmlhttp.responseXML.documentElement;
                } catch (e) {
                    alert("您的浏览器不能正常加载文件。请切换到兼容模式,或者更换浏览器");
                    return;   //如果创建不成功,就直接返回,不往下走。
                }
            }
        }
        return xmlDoc;
    }

</script>
</body>

</html>

2)cities.xml文件的内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<china>
	<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>
	<province name="山东省">
		<city>济南</city>
		<city>青岛</city>
		<city>威海</city>
		<city>烟台</city>
		<city>潍坊</city>
	</province>
</china>

此实例完美解决了xml在chrome上的加载问题。

3、以下是Ajax版,调用cities.xml文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script>
</head>
<body>
<select id="province" name="province">
    <option value="">请选择....</option>
</select>
<select id="city" name="city">
    <option value="">请选择.....</option>
    <option value="铁岭">铁岭</option>
</select>
</body>
<script language="JavaScript">
    $.get("cities.xml", function (xml) {
        var docXml = xml;
        var $provinceXmlElements = $(docXml).find("province");
        $provinceXmlElements.each(function (index, domEle) {
            var $provinceXmlValue = $(domEle).attr("name");

            var $option = $("<option></option>");
            $option.attr("value", $provinceXmlValue);
            $option.text($provinceXmlValue);


            var $provinceElement = $("#province");
            $provinceElement.append($option);

        });

        $("#province").change(function () {
            var $provinceValue = $("#province").val();
//$("#city option[value!='']").each(function(index,domEle){
// $(domEle).remove();
//});
            $("#city option[value!='']").remove();

            $provinceXmlElements.each(function (index, domEle) {
                var $provinceXmlValue = $(domEle).attr("name");

                if ($provinceValue == $provinceXmlValue) {
                    var $cityXmlElements = $(domEle).find("city");

                    $cityXmlElements.each(function (index, domEle) {
                        var $cityXmlValue = $(domEle).text();

                        var $option = $("<option></option>");
                        $option.attr("value", $cityXmlValue);
                        $option.text($cityXmlValue);

                        var $cityElement = $("#city");
                        $cityElement.append($option);
                    });
                }
            });
        });
    })

</script>
</html>

 

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 省市二级联动js和jquery版,调用XML,支持chrome,完美可用

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址