IE浏览器下拉框无法自动填充？

Question

IE浏览器下拉框无法自动填充？

3

我正在尝试根据在类别选择列表中选择的内容，获取子类别选择列表的值。这似乎在IE上无法正常工作。有人能建议一下问题所在吗？

在php文件中，我有以下代码：

<body onload="setSubcategories(default_value);">

在js文件中，我有类似以下内容的代码：

 subcategories = new Array();
 subcategories['Lifestyle'] = ['All',
                                  'Beauty (SHC)',
                                  'Skin Care',
                                  'Hair Care',
                                  'Oral Care',
                                  'Cosmetics',
                                  'Footwear',
                                  'Jewelry',
                                  'Male Styling',
                                  'Women Hygiene',
                                  'Womens magazines',
                                  'Apparels',
                                  ' Fashion (AFA)',
                                  'Spa',
                                  'Accessories'
                                  ];
    subcategories['Automobiles'] = ['All',
                           'Automobiles (C&B)',
                           'Cars',
                           'Bikes',
                           'Car Magazine',
                           'Bikes Magazine',
                           'Accessories'
                       ];
    subcategories['FoodandBeverage'] = ['All',
                                  'Snacking',
                                  'Confectionary',
                                  'Beverages',
                                  'Generic F&B',
                                  'Restaurant Review',
                                  'Food Reviews',
                                  'Wines & Vineyards'
                              ];


function setSubcategories(default_value){
    default_value = (typeof default_value == 'undefined') ?
             'All' : default_value;
    var elem = document.getElementById('id-category');
    if(elem == null){return false;}

    var category = elem.value;
    var subelem = document.getElementById('id-subcategory');
    var html = "";
    var subcategoriesArr = subcategories[category];
    for(var i=0; i < subcategoriesArr.length; i++){
        var selected = subcategoriesArr[i] == default_value ? " selected" : "";
        html += '<option' + selected + '>' + subcategoriesArr[i] + '</option>\n';
    }
    subelem.innerHTML = html;
}

- Arc

我不认为这与您的问题直接相关，但请记住，您的HTML中不应该有＆符号-请改用& HTML实体代码以呈现＆符号。 - Tamas Czinege

哦，是的...谢谢你的建议。但是我在这个小的JavaScript上有点卡住了。 - Arc

为什么要使用JS，甚至是PHP？如果数据像那样是硬编码的，那么你不如在HTML中完成它。 - Ewan Todd

最好使用 var 声明所有变量，但是你好像没有对 subcategories 进行声明。此外，subcategories 应该是一个 Object 而不是一个 Array，因为你没有使用任何数组的特殊功能。 - Tim Down

3个回答

0

使用历史悠久的方法创建Option对象并将它们添加到

- Tim Down

0

我以前遇到过这个 bug。在 Internet Explorer 中，无法设置 select 元素的 innerHTML。您必须将 select 元素包装在 div（或其他元素）中，然后生成包含要插入的选项的新 select 元素的标记。

以下是一些伪代码：

定位 select
将 select 包装在 div 元素中
存储 select 的标记以供稍后重用（步骤＃5），并清除 div 的内容
生成选项的标记
将该标记包含在存储的 select 标记中
将整个内容放置在包围 select 的 div 中

不用说：最终我使用了纯 DOM 方法。这很遗憾，因为它比使用 innerHTML 慢得多。

- cllpse

不需要这样做。在过去的十年中，通过使用Option对象填充选择器的options集合，已经可以在所有主要浏览器中重新填充选择器的选项了。 - Tim Down

@Tim Down：请再读一遍我的答案。我引用的是：“在IE上似乎无法工作。有人能提出问题吗？”他想知道问题所在，而我已经给出了答案。除此之外：我实际上还鼓励他采用纯DOM方法，跳过innerHTML方法。 - cllpse

当我发表评论时，我已经阅读并理解了您的回答。自那以后，我已经决定我的负评过于仓促，但显然除非您编辑您的答案，否则我无法删除它，所以对此我很抱歉，并且会尝试改变我的习惯，因为这是我本周第二次这样做。我反对您回答中概述了一种我们都认为不好的技术；我认为鼓励好的技术更好。我也不确定纯DOM方法是否适用于所有合理的浏览器，但我对它的记忆有点模糊，所以我可能是错的。 - Tim Down

回答已编辑。我非常赞同鼓励最佳实践 - 我自己也这样做（经常导致我做你正在做的事情...略微减少了一些）。 - cllpse

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jerjer · Accepted Answer

尝试使用DOM等效方法：

var subcategoriesArr = subcategories[category];
for(var i=0; i < subcategoriesArr.length; i++){
    var option = document.createElement('option');
    option.value = option.text = subcategories[i];
    option.selected = (subcategoriesArr[i] == default_value);
    subelem.appendChild(option);
}