Question

嗨我有一个常规选择框，里面有值。问题是它长时间导致页面加载速度问题，特别是在移动网络上，导致页面加载失败的频率超出预期。

由于此字段很少更改，我认为它会更好地作为事件

我搜索了很多，发现很少关于完全动态的选择框 - 所以这就是我提出来的

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 get的顶部）然后第二次和随后点击它闪烁并且每次都将所选内容更改为列表顶部

Answer 1

我修复了后一部分，选择

周围有一个拼写错误

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

IN CHROME：

但它仍然无法在页面加载后第一次使用时工作..非常奇怪..看起来浏览器动画在第一次渲染一个选项后字面上完成得太快我确信这是因为如果我只是使用getJSON调用周围的警报，它第一次渲染得很好（尽管警报器中断）。

IN FIREFOX

完全不同的bug - 浏览器拒绝不将新文本重绘到选择框中。基本上，如果你单击下拉菜单，它将删除以前的设置

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

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

我不喜欢它，但它实现了我的所有目标：

只会加载一个<option></option> - 非常罕见的事件
表示每次加载页面时都不会造成服务器负担
为没有“预先选择”加载命中的选择获取JSON（事件驱动的服务器get）
干净地向用户显示更改选项

注意

感谢PSL的帮助，他出于某种原因删除了他的帮助帖子

<强> FIDDLE 你可以看到一个jsfiddle它（按钮的一些定位看起来很糟糕，所以我重写了widthe和东西，但它有效）http://jsfiddle.net/Ups54/

json（仅） - 完全动态-jquery选择框下拉列表

1 个答案: