我想做两个下拉菜单，如何在第一个下拉菜单中变化时，第二个也跟着变？？？

就是根据第一个select的值来创建第二个select，只要写第一个select的onchange事件就行了
在onchange事件中再来动态生成第二个菜单的值

解决方案 »

  1.   

    <select id="country" onchange="xcity(this.value, 'city')">
    <option value="">选择国家...</option>
    </select>
    <select id="city" onchange="dispcity()">
    <option value="">选择城市...</option>
    </select>
    &nbsp;&nbsp;&nbsp;<span id="xdisp" style="color:#ff0000"></span>
    <script language="JavaScript">
    <!--
    var cityarr = {
    "美国":["纽约","华盛顿"],
    "中国":["北京","上海","深圳"],
    "":[]
    };function init(name)
    {
    var name;
    var n = document.getElementById(name).options.length;
    for(var k in cityarr) {
    if(k && cityarr[k].length > 0) {
    var optionid=document.createElement("OPTION");
    optionid.text= k;
    optionid.value= k;
    document.getElementById(name).add(optionid, ((document.all)?(n++):null));
    }
    }
    }function xcity(value, name)
    {
    var name;
    var n = document.getElementById(name).options.length;
    for(var k=1; k<n; k++) document.getElementById(name).remove(1);
    var citys = cityarr[value];
    if(citys && citys.length > 0) {
    var kmax = citys.length;
    for(var k=0; k<kmax; k++) {
    var optionid=document.createElement("OPTION");
    optionid.text= citys[k];
    optionid.value= citys[k];
    document.getElementById(name).add(optionid, ((document.all)?(n++):null));
    }
    }
    }function dispcity()
    {
    document.getElementById("xdisp").innerHTML = document.getElementById("country").value +"-" +document.getElementById("city").value;
    }init("country");
    //-->
    </script>
      

  2.   

    http://fason.nease.net/code/form/select/ymd.htm
      

  3.   

    拷贝下列代码：
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title>
    <script language="javascript">
    function setprovince(s){
    s.province.length=12;
    s.province.options[0].value="110000";
    s.province.options[0].text="一月";
    s.province.options[1].value="120000";
    s.province.options[1].text="二月";
    s.province.options[2].value="130000";
    s.province.options[2].text="三月";
    s.province.options[3].value="140000";
    s.province.options[3].text="四月";
    s.province.options[4].value="150000";
    s.province.options[4].text="五月";
    s.province.options[5].value="160000";
    s.province.options[5].text="六月";
    s.province.options[6].value="170000";
    s.province.options[6].text="七月";
    s.province.options[7].value="180000";
    s.province.options[7].text="八月";
    s.province.options[8].value="190000";
    s.province.options[8].text="九月";
    s.province.options[9].value="190000";
    s.province.options[9].text="十月";
    s.province.options[10].value="200000";
    s.province.options[10].text="十一月";
    s.province.options[11].value="210000";
    s.province.options[11].text="十二月";
    }
    function setcity(d){
    var valueprovince=d.province.options[d.province.selectedIndex].value;
    if (valueprovince.indexOf("10")==0){
    d.city.length=1;
    d.city.options[0].value="无";
    d.city.options[0].text="无";
    d.city.options[0].selected=true;
    }
    if (valueprovince.indexOf("11")==0){
    d.city.length=31;
    d.city.options[0].value="01";
    d.city.options[0].text="01";
    d.city.options[1].value="02";
    d.city.options[1].text="02";
    d.city.options[2].value="03";
    d.city.options[2].text="03";
    d.city.options[3].value="04";
    d.city.options[3].text="04";
    d.city.options[4].value="05";
    d.city.options[4].text="05";
    d.city.options[5].value="06";
    d.city.options[5].text="06";
    d.city.options[6].value="07";
    d.city.options[6].text="07";
    d.city.options[7].value="08";
    d.city.options[7].text="08";
    d.city.options[8].value="09";
    d.city.options[8].text="09";
    d.city.options[9].value="10";
    d.city.options[9].text="10";
    d.city.options[10].value="11";
    d.city.options[10].text="11";
    d.city.options[11].value="12";
    d.city.options[11].text="12";
    d.city.options[12].value="13";
    d.city.options[12].text="13";
    d.city.options[13].value="14";
    d.city.options[13].text="14";
    d.city.options[14].value="15";
    d.city.options[14].text="15";
    d.city.options[15].value="16";
    d.city.options[15].text="16";
    d.city.options[16].value="17";
    d.city.options[16].text="17";
    d.city.options[17].value="18";
    d.city.options[17].text="18";
    d.city.options[18].value="19";
    d.city.options[18].text="19";
    d.city.options[19].value="20";
    d.city.options[19].text="20";
    d.city.options[20].value="21";
    d.city.options[20].text="21";
    d.city.options[21].value="22";
    d.city.options[21].text="22";
    d.city.options[22].value="23";
    d.city.options[22].text="23";
    d.city.options[23].value="24";
    d.city.options[23].text="24";
    d.city.options[24].value="25";
    d.city.options[24].text="25";
    d.city.options[25].value="26";
    d.city.options[25].text="26";
    d.city.options[26].value="27";
    d.city.options[26].text="27";
    d.city.options[27].value="28";
    d.city.options[27].text="28";
    d.city.options[28].value="29";
    d.city.options[28].text="29";
    d.city.options[29].value="30";
    d.city.options[29].text="30";
    d.city.options[30].value="31";
    d.city.options[30].text="31";d.city.options[0].selected=true;
    }
    else if(valueprovince.indexOf("12")==0){
    d.city.length=29;
    d.city.options[0].value="01";
    d.city.options[0].text="01";
    d.city.options[1].value="02";
    d.city.options[1].text="02";
    d.city.options[2].value="03";
    d.city.options[2].text="03";
    d.city.options[3].value="04";
    d.city.options[3].text="04";
    d.city.options[4].value="05";
    d.city.options[4].text="05";
    d.city.options[5].value="06";
    d.city.options[5].text="06";
    d.city.options[6].value="07";
    d.city.options[6].text="07";
    d.city.options[7].value="08";
    d.city.options[7].text="08";
    d.city.options[8].value="09";
    d.city.options[8].text="09";
    d.city.options[9].value="10";
    d.city.options[9].text="10";
    d.city.options[10].value="11";
    d.city.options[10].text="11";
    d.city.options[11].value="12";
    d.city.options[11].text="12";
    d.city.options[12].value="13";
    d.city.options[12].text="13";
    d.city.options[13].value="14";
    d.city.options[13].text="14";
    d.city.options[14].value="15";
    d.city.options[14].text="15";
    d.city.options[15].value="16";
    d.city.options[15].text="16";
    d.city.options[16].value="17";
    d.city.options[16].text="17";
    d.city.options[17].value="18";
    d.city.options[17].text="18";
    d.city.options[18].value="19";
    d.city.options[18].text="19";
    d.city.options[19].value="20";
    d.city.options[19].text="20";
    d.city.options[20].value="21";
    d.city.options[20].text="21";
    d.city.options[21].value="22";
    d.city.options[21].text="22";
    d.city.options[22].value="23";
    d.city.options[22].text="23";
    d.city.options[23].value="24";
    d.city.options[23].text="24";
    d.city.options[24].value="25";
    d.city.options[24].text="25";
    d.city.options[25].value="26";
    d.city.options[25].text="26";
    d.city.options[26].value="27";
    d.city.options[26].text="27";
    d.city.options[27].value="28";
    d.city.options[27].text="28";
    d.city.options[28].value="29";
    d.city.options[28].text="29";
    d.city.options[0].selected=true;
    }
    }
    </script></head><body onload=setprovince(document.select);setcity(document.select)>
    <form name=select>
    <select onchange=setcity(document.select) name=province>
    </select>
    <select name=city></select>
    </form>
    </body></html>
    我这里就写到二月，剩下的你自己来搞定，很简单的。
      

  4.   

    <html>
    <head>
    <title>年月日三下拉框联动</title>
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
    <meta name='author' content='F.R.Huang(meizz梅花雨)//www.meizz.com'>
    </head><body onload="YYYYMMDDstart()">
    <form name=form1>
      <select name=YYYY onchange="YYYYDD(this.value)">
        <option value="">请选择 年</option>
      </select>
      <select name=MM   onchange="MMDD(this.value)">
        <option value="">选择 月</option>
      </select>
      <select name=DD>
        <option value="">选择 日</option>
      </select>
    </form><script language="JavaScript"><!--
    function YYYYMMDDstart()
    {
        MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];    //先给年下拉框赋内容
        var y   = new Date().getFullYear();
        for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年
            document.form1.YYYY.options.add(new Option(" "+ i +" 年", i));    //赋月份的下拉框
        for (var i = 1; i < 13; i++)
            document.form1.MM.options.add(new Option(" " + i + " 月", i));    document.form1.YYYY.value = y;
        document.form1.MM.value = new Date().getMonth() + 1;
        var n = MonHead[new Date().getMonth()];
        if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
            writeDay(n); //赋日期下拉框
        document.form1.DD.value = new Date().getDate();
    }
    function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
    {
        var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
        if (MMvalue == ""){ var e = document.form1.DD; optionsClear(e); return;}
        var n = MonHead[MMvalue - 1];
        if (MMvalue ==2 && IsPinYear(str)) n++;
            writeDay(n)
    }
    function MMDD(str)  //月发生变化时日期联动
    {
        var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
        if (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;}
        var n = MonHead[str - 1];
        if (str ==2 && IsPinYear(YYYYvalue)) n++;
            writeDay(n)
    }
    function writeDay(n)  //据条件写日期的下拉框
    {
        var e = document.form1.DD; optionsClear(e);
        for (var i=1; i<(n+1); i++)
            e.options.add(new Option(" "+ i + " 日", i));
    }
    function IsPinYear(year)//判断是否闰平年
    {   return(0 == year%4 && (year%100 !=0 || year%400 == 0));}
    function optionsClear(e)
    {
        for (var i=e.options.length; i>0; i--)
            e.remove(i);
    }
    //--></script>
    </body>
    </html>