How can I successfully implement the .ajaxStart and .ajaxStop funkction with timer in my example below

Say I have the code below and would like to fill a dropdown dynamically like in this example (the first example calls “Pulls from text files”) NOT JSON or MySQL. When I choose for example “beverages” i want to wait say 2 sec. and see the loading div container. I write, that I want to see this loading div for 2 sec., because i the practise small text files are loading very quickely, so the client don’t see the loading div, just a flash that takes 1/3 sec. The loading container can be shown longer, for example when the connection is bad, like Wi-Fi on a restaurant. So I have the code below, but i don’t now why it dosen’t work and who can i declarate the rule with the 2 sec.


<body> <h1>Pulls from text files</h1> <select id="text-one"> <option selected value="base">Please Select</option> <option value="beverages">Beverages</option> <option value="snacks">Snacks</option> </select>        <br />       <select id="text-two"> <option>Please choose from above</option> </select> </body> 


$  (document).ready(function() { $  ("#text-one").change(function() { $  ("#text-two").load("textdata/" + $  (this).val() + ".txt"); }); 


$  (document).ready(function() { $  ('<div id="loading">Loading...</div>') .insertBefore('#text-two') .ajaxStart(function() { $  (this).show(); }).ajaxStop(function() { $  (this).hide(); }); }); 

CSS #loading {display:none;}

So when I Select from the select option “beverages” I want to see the loading div container for 2 sec. or longer, when the connection is bad or when the connetion is interrupting (bad Wi-Fi). How can I improve my code above and why it didn’t work. Please give me an answear / thanks.