Question

当我的应用首次打开时，我通过ajax调用动态填充几个选择框。然而，当页面加载时，我注意到的是我的选择框开始为空，然后一旦填充，他们相应地调整它们的大小。这很烦人，有点像UI分心。

我在document.ready方法中确实有种群方法，但也许我接近这个错误了吗？

$(document).ready( function(){

populateOptions(); // Populate our select box upon page load.

});

// Builds a select list and binds it to a class
function populateOptions(){

    var optionList = getOptions();
    var myList = "";

    // Loop over our returned result set and build our options
   for(i=0; optionList.length; i++){
       myList += "<option>"+optionList[i][1]+"</option>";
    }

    // Now take our myList and append it to our select
    $("#myOptionList").append(myList);
}

Options: <select id="myOptionList"></select>

Answer 1

您可以将宽度设置为按css选择

Answer 2

添加虚拟选项，以便在通过AJAX加载时显示：

<select id="myOptionList">
    <option>Loading...</option>
</select>

清除“加载”选项并在可用时添加新列表

$("#myOptionList").html('');
$("#myOptionList").append(myList);

用css设置宽度：

#myOptionList{
width:150px;
}

Answer 3

一个简单的解决方案是在调用ajax函数时直接创建孩子。

在完成populateOptions（）函数之前，将select附加到。

我记得有这个问题，有可能解决它，但这是处理它的一种非常简单的方法。

希望得到这个帮助。

在页面加载时动态加载选择框

3 个答案: