需求： 我现在有三个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>