0

嗨，我有一个带有值的常规选择框。问题是它太长了，它会导致页面加载速度问题，尤其是在移动网络上，并导致页面加载失败的频率比您预期的要高。.

由于这个领域很少改变，我认为作为一个活动会更好

我用谷歌搜索了很多关于完全动态选择框的信息 - 所以这就是我想出的

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 调用中重新绘制它——问题是它不起作用——首先单击它只显示一项（ json 顶部）然后第二次和随后的单击它闪烁并每次将所选内容更改为列表顶部

4

1 回答 1

0

我修复了它的后半部分，选择周围有一个错字

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

铬：

  • 但它仍然无法在页面加载后首次使用.. 非常奇怪.. 似乎浏览器动画在第一次渲染一个选项后完成得太快了我有信心是这种情况，因为如果我只是在周围使用警报getJSON 调用它第一次呈现良好（尽管警报框中断）。

在火狐中

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

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

判决

对此没有解决方案，因为您完全不能中断下拉事件**，所以我决定采用混合（差）解决方案。

伪代码解决方案：

  • 使用仅包含禁用输入框的事件覆盖来屏蔽选择框
  • 仅在用户参与事件后才导致叠加层切换到下拉底层

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（按钮的一些位置看起来很糟糕，所以我重新设计了宽度和其他东西，但它可以工作）http://jsfiddle.net/Ups54/

于 2013-07-11T15:06:15.403 回答