Question

我有一个非常奇怪的问题。我有一个具有一定宽度的下拉列表。我使用Ajax调用来填充下拉列表，当填充下拉列表时，它会减小宽度。由于某种原因，当使用选项填充时，下拉列表的大小会更改（下拉列表的大小会减小）。

JavaScript：

var serialNumberDropDownList = $("<select></select>");
    serialNumberDropDownList.attr("id","SerialNumberDropDownList_" + index);

    serialNumberDropDownList.addClass("DropDownListStyle");

    serialNumberDropDownList.append($("<option></option>").attr("value", "").text("Please select Serial Number"));


 serialNumberDropDownList.click(function() {

        if ($(this).children().length > 1) return false;        

        populateSerialNumberDropDownList();         

    });


function populateSerialNumberDropDownList() {


    $.ajax(
            {
                type: "POST",
                url: "../SomeWebService",
                dataType: "json",
                data:"{}" ,  
                contentType: "application/json",
                success: function(response) {

                    var data = JSON.parse(response.d);

                    for (i = 0; i < data.length; i++) {

                        serialNumberDropDownList.append($("<option></option>").text(data[i]).val(data[i]));
                    }

                },
                error: function(xhr) {
                    var res = eval("(" + xhr.responseText + ")");
                    alert(res.Message);
                }
            });


}

**CSS:** 

.DropDownListStyle 
{
    font-family:Verdana;
    font-size:10px;
    width:95%;
    min-width: 95%; 
}

Answer 1

奇怪的是，如果我执行以下操作，那么它的工作完全正常，它确实会改变下拉列表的宽度：

 complete: function() {

                serialNumberDropDownList.removeClass("DropDownListStyle");
                serialNumberDropDownList.addClass("DropDownListStyle");

                }

使用Ajax填充选择列表的jQuery会导致宽度发生变化

1 个答案: