IE9及IE9向下兼容各浏览器页面显示有关问题

2013-11-29

IE9及IE9向下兼容各浏览器页面显示问题背景：select框下拉显示有BUG，IE10及IE10向下兼容各浏览器均无问题，

IE9及IE9向下兼容各浏览器页面显示问题
背景：select框下拉显示有BUG，IE10及IE10向下兼容各浏览器均无问题，由于PM用的IE9发现BUG，我换成IE9后，发现IE9下所有类型浏览器均有此BUG，FF、chrome均正常。

BUG：使用F12工具，选中的页面元素与实际显示的有差异，如选中select，下面option为空，页面上则显示出多个option，js已验证，均执行完毕。

见图：1、点击下拉框，出现： IE9及IE9向下兼容各浏览器页面显示有关问题
2、选中西宁市，实际显示出南京市
3、实际已加载出江苏省所有城市，但是下拉框依然显示不正确：

贴一段Js：

$("#provinceOid").change(function(){
$("#distOid").empty();
                $("#cityOid").empty();
                opt.clone().attr("value", "").html("-"+$("#selectSp").html()+"-").appendTo("#distOid");
                opt.clone().attr("value", "").html("-"+$("#selectSp").html()+"-").appendTo("#cityOid");
                
 var parId = $(this).val();
 if(parId != ""){
 $.ajax({
                type:"GET",
                url:"<c:url value='/obtaionListDistrictsByParentOidByJson.action'/>",
                async:false,
                data:{
                paramDistParentOid: parId
                },
                dataType:"json",
                success:function(data){
                  var dists = data.dists;
                      if(dists != null){
                          $.each(dists, function(index, value){
                              var op = opt.clone().attr("value", value.entityOid).html(value.distName).appendTo("#distOid");
                          }); 
                          
                      }
                }   
            });
 }
    });

这个BUG头疼一天了，望大神们赐教。
[解决办法]
目测应该是克隆混乱造成的。像这种省市县级联动，应该用不着克隆。清空下拉再赋值html或者options.add()即可。
[解决办法]
纯dom操作试试，不行就是你们浏览器的bug了。。

   $("#provinceOid").change(function () {
        var distOid = $("#distOid")[0];
        var cityOid = $("#cityOid")[0];
        distOid.options.length = 0;
        cityOid.options.length = 0;
        distOid.options.add(new Option("-" + $("#selectSp").html() + "-", ''));
        cityOid.options.add(new Option("-" + $("#selectSp").html() + "-", ''));
        var parId = $(this).val();
        if (parId != "") {
            $.ajax({
                type: "GET", 
 
                url: "<c:url value='/obtaionListDistrictsByParentOidByJson.action'/>",
                async: false,
                data: {
                    paramDistParentOid: parId
                },
                dataType: "json",
                success: function (data) {
                    var dists = data.dists;
                    if (dists != null) {
                        $.each(dists, function (index, value) {
                            distOid.options.add(new Option(value.distName, value.entityOid));
                        });

                    }
                }
            });
        }
    });

热点排行

JavaScript

IE9及IE9向下兼容各浏览器页面显示有关问题