淘先锋技术网

首页 1 2 3 4 5 6 7

主要实现的功能如图:

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

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