json（only） - 完全動態 - jquery選擇框下拉列表

Question

嗨，我有一個常數選擇框中的值。問題在於它太長時間會導致頁面加載速度問題，尤其是在移動網絡上，導致頁面加載失敗的頻率比您預期的要高。

由於此字段很少發生更改，因此我認爲它會更好事件

我GOOGLE了這個有很多，發現甚少，完全動態的選擇框 - 所以這是我想出了

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> 

希望你能看到我在做什麼 - 在下拉菜單中顯示「舊」值 - 然後填充它並從.getJSON調用中重畫它 - 問題在於不起作用 - - 第一次單擊它顯示只有1項（JSON頂部得到）然後第二次和隨後的點擊它閃爍，並將選定的每次更改到列表頂部

Answer 1

我修復了它的後半部分有一個錯別字

   $.map(j.params, function(item) { 
       options += '<option value="' + item.id + '"' +((current==item.id)?' selected':'')+'>' + item.name + '</option>'; 
      }); 

在Chrome：

• 但它仍然無法在頁面加載後首次使用..非常奇怪..看起來，瀏覽器動畫字面完成一個選項的第一次渲染後太快，我覺得這是這種情況，因爲如果我只是簡單地在getJSON調用周圍使用警報，它首次渲染得很好（儘管alertbox中斷）。

在Firefox

• 完全不同的錯誤 - 布勞爾拒絕不重繪新的文本到選擇框。基本上如果您點擊下拉菜單，則會刪除之前的設置

================================ =====================================

VERDICT

有沒有解決方案，因爲你不能打斷下拉事件**所有**，所以我決定採用混合（窮人）解決方案。

僞代碼：

• 掩模與含有禁用輸入框僅
• 原因覆蓋一個事件覆蓋的選擇框只有用戶後交換到一個下拉底層接合事件

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"} 

我不喜歡它，但它滿足所有目標，對我來說：

• 只加載一個​​3210，除非需要改變 - 一個非常非常罕見的事件
• 手段我不會導致服務器負擔，每次頁面加載時間
• 去得到JSON的選擇沒有「預先選擇」 Load命中（事件驅動的服務器get）
• 乾淨顯示的變化選項給用戶

注意

感謝PSL他的幫助，他刪除他的幫助線程出於某種原因

FIDDLE 你可以看到它的的jsfiddle（一些按鈕的定位看起來很糟糕，所以我返工widthe和東西，但它的工作原理）http://jsfiddle.net/Ups54/