2010-08-27 92 views
1

鑑於以下JavaScript功能,無法設置在與JavaScript選擇下拉選擇在IE8

function switch_plug_drop_down(plug_id) { 
     selector = document.getElementById('group_1'); 
     if (plug_id == "1") {selector.options['product_253'].selected = true;} 
     if (plug_id == "2") {selector.options['product_217'].selected = true;} 
     if (plug_id == "3") {selector.options['product_254'].selected = true;} 
     if (plug_id == "4") {selector.options['product_255'].selected = true;} 
     if (plug_id == "5") {selector.options['product_256'].selected = true;} 
    } 

和下面的HTML選擇元件(由CS-車產生)

<select name="product_data[245][configuration][1]" id="group_1" onchange="fn_check_exceptions(245);fn_check_compatibilities(1,'select','S');"> 
    <option id="product_255" value="255" >Power Adapter Plug Choice AUS<span class="price"></span></option> 
    <option id="product_217" value="217" >Power Adapter Plug Choice EURO<span class="price"></span></option> 
    <option id="product_256" value="256" >Power Adapter Plug Choice JAPAN<span class="price"></span></option> 
    <option id="product_254" value="254" >Power Adapter Plug Choice UK<span class="price"></span></option> 
    <option id="product_253" value="253" selected="selected"} >Power Adapter Plug Choice USA/Canada<span class="price"></span></option> 
</select> 

這工作正常在FF 3.6.8,Chrome 5.0.375,但在IE 8(瀏覽器模式8,文檔模式IE8標準)失敗

我在IE 8的JavaScript調試器中出現錯誤:

'selector.options.product_217' is null or not an object 

和這對應於上面的js代碼中的selector.options['product_217'].selected = true;

此外,jQuery 1.3.n是在網站上,工作正常。

有人知道發生了什麼以及如何解決?

UPDATE:

我實現了Tim的解決方案,但有值裝上自動:

selector = document.getElementById('group_1'); 
for (var i = 0; i < selector.children.length; ++i) { 
    var child = selector.children[i]; 
    if (child.tagName == 'OPTION') optionIndicesByPlugId[child.value]=''+i; 
} 

,並傳遞給switch_plug_drop_down的plug_id(此代碼this SO question's first answer來)函數不再是1-5數字,而是select中的值。

回答

2

選擇的options屬性不保證包含與每個選項的值相對應的屬性。大多數瀏覽器(不是IE)都將它實現爲HTMLOptionsCollection,這是易混淆的說明:DOM規範和MDC都似乎暗示options的非數字屬性應該對應於選項元素的名稱和ID。因此,最常用的瀏覽器方法是使用數字屬性。

設置的選項當前已選中的最簡單的方法是使用選擇的selectedIndex屬性:

var optionIndicesByPlugId = { 
    "1": 4, 
    "2": 1, 
    "3": 3, 
    "4": 0, 
    "5": 2 
}; 

function switch_plug_drop_down(plug_id) { 
    var selector = document.getElementById('group_1'); 
    selector.selectedIndex = optionIndicesByPlugId[plug_id]; 
} 
+0

嗯。它可能與下拉式中的id與value相關......現在正在調查。 更新:不。 – 2010-08-27 23:45:30

+0

更新了我的答案。 – 2010-08-27 23:47:39

+0

看到了。我正在看它... – 2010-08-27 23:54:25