internet explorer语言 - 通过Javascript填充的innerHTML在IE9中不工作

Question

我有一个HTML表单，其中有一个+标记。我想通过Javascript对选项列表进行排序。我写了一个代码，可以在Chrome, Firefox, Safari和Opera中工作，但不能在Internet Explorer中工作。我正在粘贴下面的javascript代码。我的代码中缺少什么吗?

window.onload = function () {
categoryOptions = $('category').innerHTML;
$('category').innerHTML = sortCategoryOptions(categoryOptions);
};

sortCategoryOptions()的函数定义如下:

function sortCategoryOptions(categoryOptions) {
var eachOption = categoryOptions.split('</option>');
for (var i = 0; i < (eachOption.length - 1); i++) {
    eachOption[i] = eachOption[i] + '</option>';
}
eachOption.sort();
optionsSorted = '';
for (var i = 0; i < eachOption.length; i++) {
    optionsSorted = optionsSorted + eachOption[i];
}
return optionsSorted; 
} 

categoryOptions字段有以下内容

<option>Option3</option>
<option>Option1</option>
<option>Option2</option>
<option>Option4</option>

预期输出

Answer 1

对于初学者来说，您实际上是在寻找<category>标记，我相当确定这不是您的意图。忽略，正如评论中指出的那样，看起来$是document.getElementById的别名，而不是jQuery。

除此之外，使用innerHTML来排序是一个可怕的的想法，更是如此，因为你依赖于</option>不被浏览器的解析器改变(它总是会，到</OPTION>)

因此，考虑到这一点，并假设您正在<select id="category">上工作，请尝试一下:

window.onload = function() {
    var sel = document.getElementById('category'),
        arr = [].concat.apply([],sel.children), // convert NodeList to array
        l = arr.length, i;
    arr.sort(function(a,b) {return a.text < b.text ? -1 : 1});
    for( i=0; i<l; i++) sel.appendChild(arr[i]);
};