html select 選項改變__html

主要實現的功能如圖：

點擊上面的選項時候，下面下拉框的選擇項也改變。

具體思路：上面使用一個可選擇下拉式清單方塊，下面使用一個單下拉式清單方塊。然後給上面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生效。
}