三级联动加一个特效加一个输入框效果求解

whidy 2010-12-29 11:58:22

三级联动下拉菜单制作:
Html代码如下,第一级是国家,第二级是省份,第三级是城市,最后还有个填写详细地址的输入框.
<select name="gj" id="gj" onchange="jihuo();"></select>
<select name="sf" id="sf" disabled="disabled" onchange="jihuo();"></select>
<select name="cs" id="cs" disabled="disabled" onchange="jihuo();"></select>
<input name="xxdz" id="xxdz" type="text" disabled="disabled" value="" />

要求的功能是默认国家下拉菜单为可选状态,其他为不可用状态,选择了中国后,省份激活可选择,其他仍然为不可用状态,选择省份后城市激活,详细地址则为不可用状态,选择城市后,则激活详细地址输入框.若选择不是中国,则直接激活输入框,其他为不可用状态

以下是简单的只有有限的几个地区的效果:



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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简单的测试效果</title>

<script language="javascript">

function jihuo()

{//连续激活

if(document.getElementById("gj").value!="zg"){

document.getElementById("sf").disabled = true;

document.getElementById("cs").disabled = true;

document.getElementById("xxdz").disabled = null;

}

else{

document.getElementById("sf").disabled = null;

if(document.getElementById("sf").value==""){

document.getElementById("cs").disabled = true;

}

else{

document.getElementById("cs").disabled = null;

if(document.getElementById("cs").value==""){

document.getElementById("xxdz").disabled = true;

}

else{

document.getElementById("xxdz").disabled = null;

document.UserReg.xxdz.focus();

}

}

}

}

</script>

</head>



<body>

<form>

  <div>单位所在地：</div>

  <div>

    <select name="gj" id="gj" onchange="jihuo();">

      <option value="">--请选择国家--</option>

      <option value="zg">中国人民共和国</option>

      <option value="mg">美国</option>

      <option value="yg">英国</option>

    </select>

  </div>

  <div>

    <select name="sf" id="sf" disabled="disabled" onchange="jihuo();">

      <option value="">--请选择省份--</option>

      <option value="hb">湖北</option>

      <option value="cs">湖南</option>

    </select>

  </div>

  <div>

    <select name="cs" id="cs" disabled="disabled" onchange="jihuo();">

      <option value="">--请选择城市--</option>

      <option value="wh">武汉</option>

      <option value="tm">天门</option>

    </select>

  </div>

  <div>详细地址：</div>

  <div>

    <input name="xxdz" id="xxdz" type="text" disabled="disabled" value="" />

  </div>

</form>

</body>

</html>

现在需要整合全国的地区,找了很多网上现成的全国地区数组整合进去,始终无法实现效果.求解诀方案...感激不尽(真是泪流满面的弄了N天了...)

...全文

135 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

whidy 2010-12-29

打赏
举报

楼上的兄弟感谢你的回复,虽然看不懂还是谢了,我就结贴了

蚂蚁上树 2010-12-29

打赏
举报



    var c1 = jQuery("#Catalog1").val(); //一级分类

            if (c1 == "-1") {//如果一级分类等于 --请选择--

                jQuery("#Catalog2").empty(); //二级分类

                jQuery("#Catalog2").append("<option value='-1'>--请选择--</option>");

                jQuery("#Catalog3").empty(); //三级分类

                jQuery("#Catalog3").append("<option value='-1'>--请选择--</option>");

            }

                //页面刷新时  加载上次的内容

            var hdc1 = jQuery("#hdc1").val(); //保持一级分类的hidden

            var hdc2 = jQuery("#hdc2").val();

            var hdc3 = jQuery("#hdc3").val();



            if (hdc1 != "") {

                SendCatalogAjax(hdc1, "#Catalog2", hdc2);

            }

            if (hdc2 != "") {

                SendCatalogAjax(hdc2,"#Catalog3",hdc3);

            }



            jQuery("#Catalog1").change(

                function() {

                    var id = jQuery("#Catalog1").val();

                    if (id != "-1" && id != "") {

                        jQuery("#hdc1").val(id); //保存一级分类的值

                        SendCatalogAjax(id, "#Catalog2", "");

                    }

                    if (id == "-1") {

                        jQuery("#Catalog2").empty();

                        jQuery("#Catalog2").append("<option value='-1'>--请选择--</option>");

                        jQuery("#Catalog3").empty();

                        jQuery("#Catalog3").append("<option value='-1'>--请选择--</option>");

                    }

                }

            );



            jQuery("#Catalog2").change(

                function() {

                    var id = jQuery("#Catalog2").val();

                    if (id != "" && id != "-1") {

                        jQuery("#hdc2").val(id); //保持二级分类的值

                        SendCatalogAjax(id, "#Catalog3", "");

                    }

                    if (id == "-1") {

                        jQuery("#Catalog3").empty();

                        jQuery("#Catalog3").append("<option value='-1'>--请选择--</option>");

                    }

                }

            );

            jQuery("#Catalog3").change(

                function() {

                    jQuery("#hdc3").val(jQuery("#Catalog3").val()); //保持三级分类的值

                }

            );

        }

        );





 //发送ajax请求

 function SendCatalogAjax(id, control, ced) {

            if (id != 0) {

                jQuery.ajax(

                {

                    url: "GetChildCatalog.ashx", //一般处理程序 根据parentId的到父级   输出<option value='valueText'>text</option> 这样格式的字符串

                    data: { parentId: id },

                    success: function(data) {

                        jQuery(control).empty();

                        jQuery(control).append(data);

                        jQuery(control).val(ced);

                    }

                }

                );

            }

        }