IE8 下的 innerHTML 兼容问题

问题表述：

首先，该问题发生在写学校选择器上面。
正常显示应该为如下图：

然而写完发现IE8下是这种情况：

通过console.log(xx.innerHTML) 发现数据标签闭合不完整导致显示不出来，如图所示：

问题原因：

IE8下使用innerHTML造成了标签闭合不完全，主要为select标签：

问题解决：

如下所示：

代码：

错误：

1
2
3
4
5
6
7
8
9
10
<span class="selectBox1">
    <select name="schoolssion" id="schoolssion" style="width:140px;">
        <option value="0">学校名称</option>
    </select>
</span>
<span class="selectBox1">
    <select id="gradeSelect" name="gradeSelect">
        <option value="0">年级</option>
    </select>
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$.ajax( {
    url:'url',
    data:{
        "region_id" : region_id,
        "school_type" : school_type
        },
    type:'post',
    dataType:'json',
    success:function(result){
        var mm = '';
        if(result.data.length > 0){
            for(var o in result.data){
                mm += '<option value="'+result.data[o]["id"]+'"';
                if(result.data[o]["id"] == school_id){
                    mm+='selected';
                }
                mm +='>'+result.data[o]["full_name"]+'</option>';
            }
        }else{
            mm += '<option value="0">学校名称</option>' 
        }
        document.getElementById("schoolssion").innerHTML = mm;
    },
    error : function(error) {
        console.log(error);
    }
});

修改后的：

将id加在span上面

1
2
3
4
5
6
7
8
9
10
<span class="selectBox1" id="schoolssion">
    <select name="schoolssion">
        <option value="0">学校名称</option>
    </select>
</span>
<span class="selectBox1"  id="gradeSelect">
    <select name="gradeSelect">
        <option value="0">年级</option>
    </select>
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.getElementById("gradeSelect").innerHTML = '<select name="gradeSelect">' + aa + '</select>';
success:function(result){
    var mm = '<select name="gradeSelect">';
    if(result.data.length > 0){
        for(var o in result.data){
            mm += '<option value="'+result.data[o]["id"]+'"';
            if(result.data[o]["id"] == school_id){
                mm+='selected';
            }
            mm +='>'+result.data[o]["full_name"]+'</option>';
        }
    }else{
        mm = '<select name="gradeSelect"><option value="0">学校名称</option></select>'
    }
    
    document.getElementById("schoolssion").innerHTML = mm;
}
【兼容性】, IE8下的innerHTML兼容问题