html里怎么做到两个下拉菜单前一个是后一个的条件，比如省和市，选了浙江省就只出现杭州市温州市等等_随笔

要用到数据库和js。

<html>

<head>

<title>通用二级下拉菜单(改进版) - 51windows.Net</title>

</head>

<body>

<!--

function TwoSelectInit(so,dv1,dv2){

var o1=so.o1var o2=so.o2var allstr=so.strvar dt1=so.dt1var dt2=so.dt2var selectonce=so.selectonce

var _s = "*|^@"

var s1=new Array(),v1=new Array(),s2=new Array(),v2=new Array()

var s1i = 0,s2i = 0

if(dt1!=""){

if(!selectonce){allstr=dt1+_s.charAt(1)+_s.charAt(0)+allstr}

else{allstr=dt1+_s.charAt(1)+dt2+_s.charAt(0)+allstr}

}

aa=allstr.split(_s.charAt(0))

for(aai=0aai<aa.lengthaai++){

aaa=aa[aai].split(_s.charAt(1))

tmps1 = aaa[0].split(_s.charAt(3))

s1[aai] = tmps1[0]v1[aai] = (tmps1.length==2)?tmps1[1]:tmps1[0]

s2[aai] = new Array()v2[aai] = new Array()

if(v1[aai]==dv1){s1i = aai}

bbbb=aaa[1]

if(dt2!=""&&!selectonce){if(bbbb==""){bbbb=dt2}else{bbbb=dt2+_s.charAt(2)+bbbb}}

bb=bbbb.split(_s.charAt(2))

for(bbi=0bbi< bb.lengthbbi++){

tmps2 = bb[bbi].split(_s.charAt(3))

s2[aai][bbi] = tmps2[0]v2[aai][bbi] = (tmps2.length==2)?tmps2[1]:tmps2[0]

if(v2[aai][bbi]==dv2){s2i = bbi}

}

for(var i=0i<o1.options.lengthi++){o1.remove(i)i--}

for(k=0k<s1.lengthk++){o1.options.add(new Option(s1[k],v1[k]))}

o1.selectedIndex=s1i

for(var i=0i<o2.options.lengthi++){o2.remove(i)i--}

for(k=0k<s2[s1i].lengthk++){o2.options.add(new Option(s2[s1i][k],v2[s1i][k]))}

o2.selectedIndex=s2i

}

function HwTwoSelect(o1,o2,liststr,dt1,dt2,t){this.o1=o1this.o2=o2this.str=liststrthis.dt1=dt1this.dt2=dt2this.selectonce=t}

//-->

</SCRIPT>

选择一次：<select name="a" onchange="TwoSelectInit(test1,this.value)"></select>　<select name="b"></select><hr>

选择两次：<select name="aa" onchange="TwoSelectInit(test2,this.value)"></select>　<select name="bb"></select><hr>

有初始值：<select name="aaa" onchange="TwoSelectInit(test3,this.value)"></select>　<select name="bbb"></select>

</form>

<!--

var selecttext=""

+"搜索@search|Google@http://www.google.com/^Yahoo@http://www.yahoo.com/"

+"*收藏@fav|无忧视窗@http://www.51windows.Net/^蓝色理想@http://www.blueidea.com/^POPO@http://plod.popoever.net/"

+""

var test1 = new HwTwoSelect(document.myform.a,document.myform.b,selecttext,"－

分类－@","－网址－@",1)//最后的参数表示，选了一级菜单后，二级菜单是否还要显示“请选择”，1或true代码，不显示，0或false代

表显示

TwoSelectInit(test1)

var test2 = new HwTwoSelect(document.myform.aa,document.myform.bb,selecttext,"－分类－@","－网址－@",0)

TwoSelectInit(test2)

var test3 = new HwTwoSelect(document.myform.aaa,document.myform.bbb,selecttext,"－分类－@","－网址－@",0)

TwoSelectInit(test3,"fav","http://www.51windows.Net/")

//-->

</SCRIPT>

<p>以下是示例代码，详细请查看源文件：<hr>

<p>&ltform method="post" name=<font color="#FF00FF">myform</font>&gt<br>

&ltselect name=&quot<font color="#FF0000">select1</font>&quot onchange=&quotTwoSelectInit(<font color="#0000FF">ttt</font>,this.value)&quot&gt&lt/select>　&ltselect

name=&quot<font color="#FF0000">select2</font>&quot&gt&lt/select>&lthr><br>

&lt/form></p>

<p>&ltSCRIPT LANGUAGE="JavaScript"><br>

&lt!--<br>

var <font color="#008000">selecttext</font>=&quot&quot<br>

+"搜索@search|Google@http://www.google.com/^Yahoo@http://www.yahoo.com/"<br>

+"*收藏@fav|无忧视窗@http://www.51windows.Net/^蓝色理想@http://www.blueidea.com/^POPO@http://plod.popoever.net/"<br>

+""<br>

<br>

var <font color="#0000FF">ttt</font> = new HwTwoSelect(document.<font color="#FF00FF">myform</font>.<font color="#FF0000">select1</font>,document.<font color="#FF00FF">myform</font>.<font color="#FF0000">select2</font>,<font color="#008000">selecttext</font>,&quot－分类－@","－网址－@",1)<br>

TwoSelectInit(<font color="#0000FF">ttt</font> ,&quotfav&quot,&quothttp://www.51windows.Net/&quot)<br>

<br>

//--><br>

&lt/SCRIPT></p>

<p><font color="#FF0000">bug:在二级菜单有初始值时，如果表单重置，二级菜单的值会变为空</font></p>

</body>

</html>

是省市联动选择？写个简单的案例给你看看，使用请载入jquery文件，效果如图：

html如下：

<option>请选择省份</option>

</select>

<option>请选择城市</option>

</select>

</select>

</select>

</select>

jquery如下：

var currentShowCity=0

$(document).ready(function(){

$("#province").change(function(){

$("#province option").each(function(i,o){

if($(this).attr("selected"))

{

$(".city").hide()

$(".city").eq(i).show()

currentShowCity=i

}

})

$("#province").change()

})

function getSelectValue(){

alert("1级="+$("#province").val())

$(".city").each(function(i,o){

if(i == currentShowCity){

alert("2级="+$(".city").eq(i).val())

}

})

}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7073627.html

html里怎么做到两个下拉菜单前一个是后一个的条件，比如省和市，选了浙江省就只出现杭州市温州市等等

发表评论

评论列表（0条）