下拉菜单没有在 IE 中填充？答案

【问题标题】：Dropdown not getting populated in IE?下拉菜单没有在 IE 中填充？
【发布时间】：2010-12-04 05:39:33
【问题描述】：

我正在尝试根据在类别选择列表中选择的内容将值添加到子类别的选择列表中。它似乎不适用于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;
}

【问题讨论】：

我认为这与您的问题没有直接关系，但不要忘记您的 HTML 中不应该有与号 (&) - 使用 &而是用 HTML 实体代码来呈现 & 符号。
哦，是的..感谢您的建议。但我有点卡在这个小 javascript
你为什么用JS，甚至PHP？如果数据是这样硬编码的，你也可以用 HTML 来做。
使用var 声明所有变量是个好主意，而subcategories 似乎没有这样做。此外，subcategories 应该是 Object 而不是 Array，因为您没有使用 Array 的任何特殊功能。

标签： php javascript select drop-down-menu

【解决方案1】：

尝试使用 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);
}

【讨论】：

可以这样做，但为什么上面的不起作用..我只是想知道。
上述方法不起作用，因为 IE 不允许您在选择时使用 innerHTML。

【解决方案2】：

使用历史悠久的方法创建Option 对象并将它们添加到选择的options 集合中：

var subcategoriesArr = subcategories[category];
var i, len, selected, optionText;

// Clear any existing options
subelem.options.length = 0;

// Create new options
for (i = 0, len = subcategoriesArr.length; i < len; i++){
  selected = (subcategoriesArr[i] === default_value);
  optionText = subcategoriesArr[i];
  subelem.options[i] = new Option(optionText, optionText, selected, selected);
}

【讨论】：

【解决方案3】：

我以前遇到过这个错误。您不能在 Internet Explorer 中的选择元素上设置 innerHTML。您必须将 select 元素包装在 div（或其他一些元素）中，然后为包含要插入的选项的新 select 元素生成标记。

这是一个小伪代码：

选择目标
将选择包装在 div 元素中
存储选择的标记供以后重用（步骤 #5）并清除 div 的内容
为选项生成标记
在存储的选择标记中包含该标记
将整个内容放在围绕 select 的 div 中

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

【讨论】：

不需要这个。十多年来，通过使用 Option 对象填充 select 的 options 集合，可以在所有主要浏览器中重新填充 select 的选项。
@Tim Down：尝试再次阅读我的答案。我引用：“它似乎在 IE 上不起作用。任何人都可以提出问题吗？”。 他想知道问题是什么。我已经给了他这个答案。最重要的是：我实际上鼓励他使用纯 DOM 方法并跳过 innerHTML 方法
我在发表评论时已阅读并理解您的回答。从那以后，我决定我的否决票太仓促了，但除非你编辑你的答案，否则显然无法删除它，所以我很抱歉，我会尝试改变我的习惯，因为这是我本周第二次这样做.我在你的回答中反对的是我们都同意的一种技术的概述是不好的。我认为最好鼓励好的技术。我也不确定纯 DOM 方法是否适用于所有合理的浏览器，但我对它的记忆很模糊，所以我可能是错的。
答案已编辑。我全心全意地同意鼓励最佳实践——我自己就是这样做的（通常导致我做和你一样的事情……在某种程度上）。