欢迎光临
我们一直在努力

jquery实现省市二级联动

jquery实现省市二级联动,直接上代码:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.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>

cities.xml

<?xml version="1.0" encoding="GB2312"?>
<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>

 

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » jquery实现省市二级联动

评论 抢沙发

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