使用jQuery构建的HTML Dropdownlist无法正常工作

debugcn 发表于 Dev

主持人

我有以下代码来根据从数据库中检索到的值在IE10浏览器上动态生成一个下拉列表

function buildOption(container, namepreface, id, val, txt) {
    var obj = $("<option />", { id : namepreface + id, value : val, text : txt});
    $("#"+ container).append(obj);
    return obj;
}

这是它生成的html，我从F12 DOM Explorer复制了

<li>
    <span class="div120RAlgn inlineblock">
        <label for="CostCenter">Cost Center:</label>
    </span>
    <span class="editor-field-alLw220">
        <select id="CostCenter">
            <option id="costcenter_0" value="0"> </option>
            <option id="costcenter_3" value="3">All</option>
        </select>
    </span>
</li>

但是，当我第一次单击下拉箭头时，会得到一个空框，就像未初始化一样。

在此处输入图片说明

当我再次单击它时，它应显示为

在此处输入图片说明

任何人都对发生的事情以及如何解决有任何想法？无论值是什么，以及列表中的选项数量如何，此问题都是一致的

该段位于文档准备功能中

$("#Region").change(function (e) {
    loadRegionLocations(e.currentTarget);
});
$("#Location").change(function (e) {
    loadLocationsCostCenters(e.currentTarget);
});

这是两种称为

function loadRegionLocations(tar) {
    $("#CostCenter").empty();
    $("#Location").empty();
    buildOption("Location", "location_", 0, 0, ' ');
    var selloc = searchArgsForObjLst($(tar).val(), "REGIONID", "LOCATIONNAME", locationlst);
    $.each(selloc, function (i, o) {
        var c = buildOption("Location", "location_", o.LOCATIONID, o.LOCATIONID, o.LOCATIONNAME);
        c.data("REGIONID", o.REGIONID);
    });
}


function loadLocationsCostCenters(tar) {
    $("#CostCenter").empty();
    buildOption("CostCenter", "costcenter_", 0, 0, ' ');
    var selcc = searchArgsForObjLst($(tar).val(), "LOCATIONID", "COSTCENTERNAME", costcenterlst);
    $.each(selcc, function (i, o) {
        var c = buildOption("CostCenter", "costcenter_", o.COSTCENTERID, o.COSTCENTERID, o.COSTCENTERNAME);
        c.data("REGIONID", o.REGIONID);
        c.data("LOCATIONID", o.LOCATIONID);
    });
}

主持人

我可能已经找到上述问题的解决方案。至少我在下面添加了代码，到目前为止，它一直在工作。

$.fn.redraw = function () {
$(this).each(function () {
    var redraw = this.offsetHeight;
});

};

然后，在构建选项的方法中，我对该方法添加了一个调用

    function loadLocationsCostCenters(tar) {
    $("#CostCenter").empty();
    buildOption("CostCenter", "costcenter_", 0, 0, ' ');
    var selcc = searchArgsForObjLst($(tar).val(), "LOCATIONID", "COSTCENTERNAME", costcenterlst);
    $.each(selcc, function (i, o) {
        var c = buildOption("CostCenter", "costcenter_", o.COSTCENTERID, o.COSTCENTERID, o.COSTCENTERNAME);
        c.data("REGIONID", o.REGIONID);
        c.data("LOCATIONID", o.LOCATIONID);
    });
    **$("#CostCenter").redraw();**
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。