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

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

要用到数据库和js。

<html>

<head>

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

<meta http-equiv="Content-Type" content="text/html charset=gb2312">

<meta name="author" content="haiwa">

</head>

<body>

<script language="JavaScript">

<!--

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>

<form method="post" name=myform>

选择一次:<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>

<SCRIPT LANGUAGE="JavaScript">

<!--

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如下:

<select id="province">

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

  <option>北京</option>

  <option>上海</option>

  <option>江苏</option>

</select>

<select class="city">

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

</select>

<select class="city">

  <option>东城</option>

  <option>西城</option>

  <option>崇文</option>

  <option>宣武</option>

  <option>朝阳</option>

</select>

<select class="city">

  <option>黄浦</option>

  <option>卢湾</option>

  <option>徐汇</option>

  <option>长宁</option>

  <option>静安</option>

</select>

<select class="city">

  <option>南京</option>

  <option>镇江</option>

  <option>苏州</option>

  <option>南通</option>

  <option>扬州</option>

</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/6101266.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存