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

三级联动下拉菜单制作:
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天了...)

解决方案 »

  1.   


        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);
                        }
                    }
                    );
                }
            }希望对你有帮助