日期:2014-05-16  浏览次数:20458 次

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

------解决方案--------------------
<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 ;
}
------解决方案--------------------
HTML code
<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>