Question

I have few select’s which their content is loaded on DOM ready.

It looks something like this:

<select id="select1"> </select>
<select id="select2"> </select>
<select id="select3"> </select>
<select id="select4"> </select>
<select id="select5"> </select>

and the javascript like this:

$(document).ready(function(){

    $("#select1").load("select1.html", 
             function (responseText, textStatus, XMLHttpRequest) {
               if (textStatus == "success") {
                     alert("success");
               }     
    }); 


$("#select2").load("select2.html", 
                 function (responseText, textStatus, XMLHttpRequest) {
                   if (textStatus == "success") {
                         alert("success");
                   }     
        });
    // and goes on for every select

EDIT:

Now, each select has different values. Select1 for countries, Select2 for colours, Select3 for currency etc. How can I combine all the options into 1 HTML/XML and load for each select its options from that 1 file.

Question 2: Is it better to load each select options its own file or have everything combined?

Note that now the content is loaded on DOM ready; for test purpose. In the feature I will be calling each select content separately. The reason I am loading the options is because each select has about 30 options and I want to reduce the loading time since the entire site its a 1 page dashboard web app with many select options.

Answer 1

You can just load fragments from a single page.

Do it like this

$("#select1").load("select.html #select1_content", //continue

In this way, you are loading into #select1 the contents of the #select1_content from your single select.html page.

See Loading Page Fragments here: http://api.jquery.com/load/