高分求一个三级联动下拉框（省、市、地区）

[kenesyu]

在网上找了几个都不太理想
简单例子也可以
要求在FireFox下面可以正常使用
取值方便

不知道为什么我只能给100分如果对分数有要求解决后我可以转帐1000分之内

[xiao7cn]

原因可能是,你没有在所有的名称后面加上编号值,这样会导致错位.

[PleaseDoTellMeWhy]

http://www.zgycrc.com/Main/index_1.asp
的那个天气预报的部分，点设置之后就有！

中央气象台的网站也有！

[hunhun02]

搂住名字帅

[kenesyu]

OK搞定了～谢谢大家散分～
其中很感谢给我提供资料的朋友们！

[zhangjincheng88]

来晚了,不过还是要说一下,我收藏的JS,供大家PP.
-------------City.js------------------------
C_Data_1=new Array("北京市","上海市","天津市","重庆市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","内蒙古","广西","西藏","宁夏","新疆","台湾","香港","澳门")
type =new Object()

type["香港"]=new Array('香港')
type["澳门"]=new Array('澳门')
type['台湾']=new Array('台北','高雄','基隆','桃园','新竹','苗栗','花莲','宜兰','台中','彰化','南投','嘉义','台南','屏东','台东')

type["北京市"]=new Array("北京市区","北京市辖区")
type["上海市"]=new Array("上海市区","上海市辖区")
type["天津市"]=new Array("天津市区","天津市辖区")
type["重庆市"]=new Array("重庆市区","重庆市辖区")
type["河北省"]=new Array("石家庄","张家口市","承德市","秦皇岛市","唐山市","廊坊市","保定市","沧州市","衡水市","邢台市","邯郸市","三河市","安平县","其他")
type["山西省"]=new Array("太原市","大同市","朔州市","阳泉市","长治市","晋城市","忻州地区","吕梁地区","晋中市","临汾地区","运城地区","其他")
type["辽宁省"]=new Array("沈阳市","朝阳市","阜新市","铁岭市","抚顺市","本溪市","辽阳市","鞍山市","丹东市","大连市","营口市","盘锦市","锦州市","葫芦岛市","其他")
type["吉林省"]=new Array("长春市","白城市","松原市","吉林市","四平市","辽源市","通化市","白山市","延边朝鲜族自治州","其他")
type["黑龙江省"]=new Array("哈尔滨市","齐齐哈尔市","黑河市","大庆市","伊春市","鹤岗市","佳木斯市","双鸭山市","七台河市","鸡西市","牡丹江市","绥化市","大兴安","其他")
type["江苏省"]=new Array("南京市","徐州市","连云港","宿迁市","淮阴市","盐城市","扬州市","泰州市","南通市","镇江市","常州市","无锡市","苏州市","其他")
type["浙江省"]=new Array("杭州市","湖州市","嘉兴市","舟山市","宁波市","绍兴市","金华市","台州市","温州市","丽水地区","余姚市","诸暨市","其他")
type["安徽省"]=new Array("合肥市","宿州市","淮北市","阜阳市","蚌埠市","淮南市","滁州市","马鞍山市","芜湖市","铜陵市","安庆市","黄山市","六安市","巢湖市","池州地区","宣城地区","其他")
type["福建省"]=new Array("福州市","南平市","三明市","莆田市","泉州市","厦门市","漳州市","龙岩市","宁德市","其他")
type["江西省"]=new Array("南昌市","九江市","景德镇市","鹰潭市","新余市","萍乡市","赣州市","上饶地区","抚州地区","宜春地区","吉安地区","其他")
type["山东省"]=new Array("济南市","聊城市","德州市","东营市","淄博市","潍坊市","烟台市","威海市","青岛市","日照市","临沂市","枣庄市","济宁市","泰安市","莱芜市","滨州地区","菏泽地区","其他")
type["河南省"]=new Array("郑州市","三门峡市","洛阳市","焦作市","新乡市","鹤壁市","安阳市","濮阳市","开封市","商丘市","许昌市","漯河市","平顶山市","南阳市","信阳市","省直辖行政单位","周口地区","驻马店地区","其他")
type["湖北省"]=new Array("武汉市","十堰市","襄攀市","荆门市","孝感市","黄冈市","鄂州市","黄石市","咸宁市","荆州市","宜昌市","省直辖行政单位","恩施土家族苗族自治州","襄樊市","其他")
type["湖南省"]=new Array("长沙市","张家界市","常德市","益阳市","岳阳市","株洲市","湘潭市","衡阳市","郴州市","永州市","邵市","怀化市","娄底市","湘西土家族苗族自治州","其他")
type["广东省"]=new Array("广州市","清远市","韶关市","河源市","梅州市","潮州市","汕头市","揭阳市","汕尾市","惠州市","东莞市","深圳市","珠海市","江门市","佛山市","肇庆市","云浮市","阳江市","茂名市","湛江市","其他")
type["海南省"]=new Array("海口市","三亚市","省直辖行")
type["四川省"]=new Array("成都市","广元市","绵阳市","德阳市","南充市","广安市","遂宁市","内江市","乐山市","自贡市","泸州市","宜宾市","攀枝花市","巴中地区","达川市","资阳地区","眉山地区","雅安地区","阿坝藏族羌族自治州","甘孜藏族自治州","凉山族自治州","其他")
type["贵州省"]=new Array("贵阳市","六盘水市","遵义市","毕节地区","铜仁地区","安顺地区","黔东南苗族侗族自治地区","黔南布依族苗族自治区","黔西南布依族苗族自治州","其他")
type["云南省"]=new Array("昆明市","曲靖市","玉溪市","丽江地区","昭通地区","思茅地区","临沧地区","保山地区","德宏傣族景颇族自治州","怒江僳僳族自治州","迪庆藏族自治州","大理白族自治州","楚雄彝族自治州","红河哈尼族自治州","文山壮族自治州","西双版纳傣族自治州","其他")
type["陕西省"]=new Array("西安市","延安市","铜川市","渭南市","咸阳市","宝鸡市","汉中市","榆林市","商洛地区","安康地区","其他")
type["甘肃省"]=new Array("兰州市","嘉峪关市","金昌市","白银市","天水市","酒泉地区","张掖地区","武威地区","庆阳地区","平凉地区","定西地区","陇南地区","临夏回族自治州","甘南藏族自治州","其他")
type["青海省"]=new Array("西宁市","海东地区","西宁市","海北藏族","海南藏族","黄南藏族","果洛藏族","玉树藏族","海西蒙古","其他")
type["内蒙古"]=new Array("呼和浩特","包头市","乌海市","赤峰市","呼伦贝尔盟","兴安盟","哲里木盟","锡林郭勒盟","乌兰察布盟","伊克昭盟","巴彦淖尔盟","阿拉善盟","其他")
type["广西"]=new Array("南宁市","桂林市","柳州市","梧州市","贵港市","玉林市","钦州市","北海市","防城港市","南宁地区","百色地区","河池地区","柳州地区","贺州地区","其他")
type["西藏"]=new Array("拉萨市","那曲地区","昌都地区","林芝地区","山南地区","日喀则","阿里地区","其他")
type["宁夏"]=new Array("银川市","石嘴山市","吴忠市","固原地区","其他")
type["新疆"]=new Array("乌鲁木齐市","克拉玛依市","自治区直辖行政单位","喀什地区","阿克苏地区","和田地区","吐鲁番地区","哈密地区","克孜勒苏柯尔克孜","博尔塔拉蒙古自治州","昌吉回族自治州","巴音郭楞蒙古自治州","伊犁哈萨克自治州","伊犁地区","塔城地区","阿勒泰地区","其他")

var v_Zhl_form;

function Zhl_C_Data_change()
{
var v_childsel = v_Zhl_form.C_Data_2;
v_childsel.length = 0;
for (var i=0; i<type[v_Zhl_form.C_Data_1.value].length; i++)
{
v_childsel.options[i] = new Option();
v_childsel.options[i].value = type[v_Zhl_form.C_Data_1.value][i];
v_childsel.options[i].text = type[v_Zhl_form.C_Data_1.value][i];
}
}

function Zhl_C_Data_PrintSelect(v_C_Data_1, v_C_Data_2, v_form)
{
v_Zhl_form = v_form;

document.writeln("<select name=C_Data_1 onchange=\"javascript:Zhl_C_Data_change()\" class='myinput'>");
for (var i=0; i<C_Data_1.length; i++)
{
if (checkState(C_Data_1[i],v_C_Data_1))
{
document.writeln("<option value=" + C_Data_1[i] + " selected>" + C_Data_1[i] + "</option>");
}
else
{
document.writeln("<option value=" + C_Data_1[i] + ">" + C_Data_1[i] + "</option>");
}
}
document.writeln("</select>");

document.writeln("<select name=C_Data_2 class='myinput'>");
for (var i=0; i<type[v_form.C_Data_1.value].length; i++)
{
if (checkState(type[v_form.C_Data_1.value][i] , v_C_Data_2))
{
document.writeln("<option value=" + type[v_form.C_Data_1.value][i] + " selected>" + type[v_form.C_Data_1.value][i] + "</option>");
}
else
{
document.writeln("<option value=" + type[v_form.C_Data_1.value][i] + ">" + type[v_form.C_Data_1.value][i]+ "</option>");
}
}
document.writeln("</select>");
}

function checkState(StrMain,SearchStr)
{
if (StrMain.length > 0)
{
if (StrMain.indexOf(SearchStr,0)!=-1)
{
return true;
}
}
return false;
}

[zhangjincheng88]

调用方法:
<!--城市:C_Data_1;区县:C_Data_2-->
<script language="javascript" src="City.js"></script>
<script language="javascript">Zhl_C_Data_1_PrintSelect("辽宁省", "沈阳市", document.RegForm);</script>

C_Data_1:代表省份
C_Data_2:代表城市

取值和赋值都是直接写 汉字 即可.

[kenesyu]

我是楼主谁能帮我改动一下这个变成三级关联高分相送了谢谢
<form name="doublecombo">
<select name="ProvinceList" size="1" onChange="redirect(this.options.selectedIndex)">
<option>请选择省</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select name="CityList" size="1">
<option>请选择市</option>
<option>请选择市</option>
</select>
<select name="RegionList" size="1">
<option>市/县</option>
</select>
<script>
<!--
var groups=document.doublecombo.ProvinceList.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("请选择市","00")
group[1][0]=new Option("A","11")
group[1][1]=new Option("AA","22")
group[1][2]=new Option("AAA","33")
group[2][0]=new Option("B","44")
group[2][1]=new Option("BB","55")
group[2][2]=new Option("BBB","66")
group[3][0]=new Option("C","77")
group[3][1]=new Option("CC","88")
group[3][2]=new Option("CCC","99")
var temp=document.doublecombo.CityList
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
</script>
</form>

[yifuzhiming]

好难啊

[kenesyu]

谢谢大家虽然还没有解决～不过我现在找到了一个方法正在研究～如果搞定我给大家散分同时把代码给大家

[kenesyu]

同时有好的方法的同志继续发言

[Eilien]

mark

[Eilien]

为什么难呢。个人觉得不太难啊。写一个函数，然后进行自我调用不就可以了？

[test33]

UP`

[yanglin0719]

我给你,一个:
Js中写法:
//===================================================================================
//省份-市级联动Bean取得
<bean:define id="placeKb12List" name="outputBean" property="placeKb12Bean" type="java.util.ArrayList" />
<bean:size id="size" name="placeKb12List" />
var arrPlaceKb12List=new Array(<bean:write name="size"/>);

//省份-市级-县市联动Bean取得
<bean:define id="placeKb123List" name="outputBean" property="placeKb123Bean" type="java.util.ArrayList" />
<bean:size id="size1" name="placeKb123List" />
var arrPlaceKb123List=new Array(<bean:write name="size1"/>);

var i; //循环使用

//省份-市级联动2维数组
for (i=0; i<arrPlaceKb12List.length; i++) {
arrPlaceKb12List[i]=new Array(1);
}
<logic:iterate id="item" name="placeKb12List" indexId="index">
arrPlaceKb12List[<bean:write name="index" />][0]="<bean:write name="item" property="placeKb1" />";
arrPlaceKb12List[<bean:write name="index" />][1]="<bean:write name="item" property="placeKb2" />";
arrPlaceKb12List[<bean:write name="index" />][2]="<bean:write name="item" property="placeKb2Name" />";
</logic:iterate>

//省份-市级-县市联动2维数组
for (i=0; i<arrPlaceKb123List.length; i++) {
arrPlaceKb123List[i]=new Array(1);
}
<logic:iterate id="item1" name="placeKb123List" indexId="index">
arrPlaceKb123List[<bean:write name="index" />][0]="<bean:write name="item1" property="placeKb1" />";
arrPlaceKb123List[<bean:write name="index" />][1]="<bean:write name="item1" property="placeKb2" />";
arrPlaceKb123List[<bean:write name="index" />][2]="<bean:write name="item1" property="placeKb3" />";
arrPlaceKb123List[<bean:write name="index" />][3]="<bean:write name="item1" property="placeKb3Name" />";
</logic:iterate>
//===============================================================================================
function setPlace(t){

var elem1=document.forms[0].placeKb1;
var elem2=document.forms[0].placeKb2;
var elem3=document.forms[0].placeKb3;
var elem2Value=elem2.value;
var elem3Value=elem3.value;
var i;
var j;

if (t=1) {
//有第1个下拉的值,确定第2个下拉列表
elem2.length = 1; //清空下拉列表
j=0;
for (i=0; i<arrPlaceKb12List.length; i++) {
if (elem1.value==arrPlaceKb12List[i][0] || elem1.value=="") {
//方法1
//elem2.options.add(new Option(arrPlaceKb12List[i][2], arrPlaceKb12List[i][1]));

//方法2
j++;
elem2.options[j] = new Option(arrPlaceKb12List[i][2]);
elem2.options[j].value = arrPlaceKb12List[i][1];
}
}

//选定先前elem2的值,如果相应下拉框没有此值，则flag位为1
var elem2Flag=1;
elem2.value = "";
for (i=0; i<elem2.length; i++) { //或者用elem2.options.length
if (elem2.options[i].value == elem2Value) elem2Flag = 0;
}
if (elem2Flag == 0) elem2.value = elem2Value;
}

//有第2个下拉的值,确定第3个下拉列表
elem3.length = 1; //清空下拉列表
j=0;
for (i=0; i<arrPlaceKb123List.length; i++) {
if ((elem1.value==arrPlaceKb123List[i][0] && elem2.value==arrPlaceKb123List[i][1] )|| (elem1.value=="" && elem2.value=="")) {

j++;
elem3.options[j] = new Option(arrPlaceKb123List[i][3]);
elem3.options[j].value = arrPlaceKb123List[i][2];
}
}

//选定先前elem3的值,如果相应下拉框没有此值，则flag位为1
var elem3Flag=1;
elem3.value = "";
for (i=0; i<elem3.length; i++) { //或者用elem3.options.length
if (elem3.options[i].value == elem3Value) elem3Flag = 0;
}
if (elem3Flag == 0) elem3.value = elem3Value;
}

//===================================================================================
jsp中下面代码:
TR>
<TD>
<bean:define id="placeKb1List" name="outputBean" property="placeKb1Bean" type="java.util.ArrayList" />
<html:select property="placeKb1" onchange="setPlace(1)">
<html:options collection="placeKb1List" property="placeKb1" labelProperty="placeKb1Name" />
</html:select>
</TD>
<TD>省</TD>
<TD>
<bean:define id="placeKb2List" name="outputBean" property="placeKb2Bean" type="java.util.ArrayList" />
<html:select property="placeKb2" onchange="setPlace(2)">
<html:options collection="placeKb2List" property="value" labelProperty="label" />
</html:select>
</TD>
<TD>市</TD>
<TD>
<bean:define id="placeKb3List" name="outputBean" property="placeKb3Bean" type="java.util.ArrayList" />
<html:select property="placeKb3">
<html:options collection="placeKb3List" property="value" labelProperty="label" />
</html:select>
</TD>
<TD>县</TD>
</TR>
====================================================================
placeKb1Bean,placeKb12Bean, placeKb123Bean都是java类,在java中查出来,放到数组中,然后根据省,调用JS,显示该省份的市,同样依次类推,希望能给你有所参考.具体比较简单.

[HowgoO]

楼主不是说，搞定了要把代码贴出来吗？

[loading_sas]

楼主用ajax不就搞定了么

[osrui]

导入area.js文件至项目下，
在调用页面加入如下代码：
<script src="js/area.js"></script>
<body onLoad="genProvinceSelect(document.form1.province, getProvinceValOfCity(''), 1);">

[hbu_hicc]

用ajax实现的 你要吗

[岁月之梦]

大部分都是二级联动！

[mailangel123]

我发个给你吧，大部份可以使用的
http://www.111cn.net/tags.php/联动菜单/