CODEWITHSUNDEEP
javascriptjquery
Jason Wells
Jason Wells

Reputation: 889

Dynamically loading select boxes on page load

I'm dynamically populating several select boxes via ajax calls when my app first opens. When the page loads however, what I am noticing is my select boxes start out empty and then once populated they adjust their size accordingly. This is annoying and a bit of a UI distraction.

I do have the population methods within my document.ready method, but perhaps I am approaching this incorrectly? 

$(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>

Upvotes: 2

Views: 2195

Answers (3)

sabithpocker
sabithpocker

Reputation: 15558

Add a dummy option to show while Loading via AJAX:

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

Clear "loading" option and add new list once available

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

to set width with css:

#myOptionList{
width:150px;
}

Upvotes: 1

artwl
artwl

Reputation: 3582

you can set a width to the select by css

Upvotes: 2

linvi
linvi

Reputation: 115

One simple solution would be to create your child directly when your ajax function is called.

Before finishing your populateOptions() function, append the select to your .

I remember having this issue, it is possible to solve it but this is a very simple way to handle it.

Hope this help.

Upvotes: 0

Related Questions