html select 选项改变

主要实现的功能如图：

点击上面的选项时候，下面下拉框的选择项也改变。

具体思路：上面使用一个可选择下拉列表框，下面使用一个单下拉列表框。然后给上面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生效。
}