Q:

json (only) - fully dynamic- jquery select box dropdown

Hi I have a regular select box with values in it. The problem is it is so long it's causing page load speed issues especially over mobile networks and causing the page to fail on load more often than you might expect.. 
Since this field is rarely changed I thought it would be better as an event
I googled this a lot and found very little about fully dynamic select box - so this is what I came up with
HTML  
 <br>
 <div class="ui-widget-header">Customer:</div> 
 <select
     name="customer_id" id="customer_id" class="ui-widget-content"
     style="width:642px;"> 
           <option value="1">Francis L. Mcbride</option>
 </select>

jQuery
<script>
$(function() {
  $("#customer_id").click(function(){ 
         $('#customer_id').prop("disabled", true); 
         $.getJSON("select.php?table=customer", function(j){ 
             var current = $("#customer_id").val(); 
             var options = ''; 
             $.map(j.params, function(item) { 
                 options += '<option value="' + item.id + ((current==item.id)?' selected':'')+'">' + item.name + '</option>'; 
             }); 
             $("#customer_id").html(options); 
             $('#customer_id').prop("disabled", false); 
         }); 
   });
});
</script>

hopefully you can see what I am doing - showing the "old" value in the drop down - then populating it and redrawing it from .getJSON call - the problem is that is doesn't work - - first click it shows only 1 item (top of the json get) then 2nd and subsequent clicks it flickers and changes the selected to the top of the list every time

A:

I fixed the latter part of it there was a typo around the select
             $.map(j.params, function(item) { 
                 options += '<option value="' + item.id + '"' +((current==item.id)?' selected':'')+'>' + item.name + '</option>'; 
             });

IN CHROME:

but it still fails to work on first use after page load.. very bizarre.. it appears that the browser animation literally finishes too fast after the first render of one option I feel confident that this is the case because if I simply use alerts around the getJSON call it renders fine first time (albeit with the alertbox interruption). 

IN FIREFOX

totally different bug - brower refuses to not redraw new text into the selectbox. basically if you click the drop down it removes the previous setting

=====================================================================
VERDICT
There is no solution for this because you can't interrupt the drop-down event **at all**, so I decided upon a hybrid (poor) solution.
Pseudo code solution:

mask the selectbox with a event overlay containing a disabled input box only
cause the overlay to swap to a dropdown underlay only after the user engages the event

jQuery
      <script>
      $(function() {
       $("#customer_id_SlideButton").button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false });
       $('#customer_id_SlideDiv').hide(); 
       $("#customer_id_SlideButton").click(function(e){ 
           if ($('#customer_id_Overlay').is(":visible")){ 
              $.getJSON("select.php?table=customer", function(j){ 
                  var current = $("#customer_id").val(); 
                  var options = ''; 
                  $.map(j.params, function(item) { 
                      options += '<option value="' + item.id + '"'+((current==item.id)?' selected':'')+'>' + item.name + '</option>'; 
                  }); 
                  $('#customer_id').html(options); 
                  $('#customer_id_SlideDiv').show(); 
                  $('#customer_id_Overlay').hide(); 
               });
           } 
           else{ 
               $('#customer_id_SlideDiv').hide(); 
               $('#customer_id_Overlay').show(); 
           } 
          return false; 
       }); 
       $("#customer_id").change(function(){ 
          $('#customer_id_FakeDisplay').val($("#customer_id option:selected").text()); 
       });
     });
     </script>

HTML
<button id="customer_id_SlideButton" class="formbox" style=" z-index : 3; width:26px; height:26px; position:relative; top:29px; left: 200px;">customer_id Display</button><br>
<div id="customer_id_Overlay" style="position: relative; top: -9px; height:21px; ">
<input class="ui-widget-content formview"  id="customer_id_FakeDisplay" disabled value="Russell Y. Guerrero" style="width:602px;">
</div>
<div id="customer_id_SlideDiv" style="position: relative; top: -10px; height:21px; "d>
<select name="customer_id" id="customer_id" class="ui-widget-content formbox" style="width:610px;">
<option value="2">Russell Y. Guerrero</option>
</select>
</div>

Json
{"params":[{"id":"7","name":"Amena D. Bradford"},{"id":"9","name":"Cameron N. Morse"},{"id":"8","name":"Camille E. Preston"},{"id":"10","name":"Doris Z. Cline"},{"id":"1","name":"Francis L. Mcbride"},{"id":"4","name":"Quamar Q. Gregory"},{"id":"5","name":"Reece W. Rhodes"},{"id":"2","name":"Russell Y. Guerrero"},{"id":"3","name":"Tamekah I. Barton"},{"id":"6","name":"Yetta V. Poole"}],"count":"10"}

I don't like it but it fulfils all the objectives for me:

only loads a single <option></option> unless needs changing - a very very rare event
means I don't cause a server burden every time the page is loaded
goes to get JSON for the select with no "pre-select" load hit (event driven server get)
cleanly shows the change choices to the user

NOTE
thanks to PSL for his help he deleted his help thread for some reason
FIDDLE
you can see a jsfiddle of it (some of the positioning of the button looked bad so I reworked widthe and things but it works) http://jsfiddle.net/Ups54/

