主要实现的功能如图:
点击上面的选项时候,下面下拉框的选择项也改变。
具体思路:上面使用一个可选择下拉列表框,下面使用一个单下拉列表框。然后给上面select 的onclick或者onchange设置事件。进行变换,函数代码如下:
function changeOption(obj){
obj.focus();
var index = obj.selectedIndex; //获取当前点击的选项的index
var option = document.getElementById("showOption"); //获取单下拉列表框
oldIndex = option.selectedIndex;
if(oldIndex != -1){
for(var i=0; i<option.options.length; i++){ //将所有的下拉选设置为没有选中状态
option.options[i].setAttribute("selected",false);
}
}
option.options[index].setAttribute("selected",true); // 将点击的可选择下拉列表框对应在单下拉列表框中的index设置为选中状态
document.getElementById("showOption").selectedIndex=index; //注意此处设置选中状态才能使得ff生效,否则上面的只能使ie生效。
}