需求:   我现在有三个select标签, 每一个里面都有多个option ,  我想要实现的效果是:当我选中第一个select中的第一个option时,后面两个select分别只显示第一个option,    当我选中第一个select中的第二个option时,后面两个select分别只显示第二个option,依此类推.      希望哪位高手能贴点代码,先谢谢啦 !    

解决方案 »

  1.   

    <select onchange='setSelect(this)'></select>
    <select id='slc2'></select>
    <select id='slc3'></select>function setSelect(slc)
    {
    document.getElementById("slc2").selectedIndex = slc.selectedIndex ;
    document.getElementById("slc3").selectedIndex = slc.selectedIndex ;
    }
      

  2.   

    <html>
    <head>
    <script type="text/javascript">
    function clickSel() {
    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    var sel3 = document.getElementById("sel3");
    sel2.selectedIndex = sel3.selectedIndex = sel1.selectedIndex;
    sel2.onfocus = function() {   
                var index = this.selectedIndex;   
                this.onchange = function() {   
                    this.selectedIndex = index;   
                };   
            };    }
    </script>
    </head>
    <body>
    <select id="sel1" onchange="clickSel()">
    <option>opts1</option>
    <option>opts2</option>
    <option>opts3</option>
    <option>opts4</option>
    <option>opts5</option>
    <option>opts6</option>
    </select>
    <select id="sel2">
    <option>opts1</option>
    <option>opts2</option>
    <option>opts3</option>
    <option>opts4</option>
    <option>opts5</option>
    <option>opts6</option>
    </select>
    <select id="sel3">
    <option>opts1</option>
    <option>opts2</option>
    <option>opts3</option>
    <option>opts4</option>
    <option>opts5</option>
    <option>opts6</option>
    </select>
    </body>
    </html>