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呼び出しから再描画します-問題は機能しないことです--最初にクリックすると、1つのアイテムしか表示されません( json get の一番上）、2回目以降のクリックでちらつき、選択したものを毎回リストの一番上に変更します

4

1 に答える 1

0

後半部分を修正しました select の周りにタイプミスがありました

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

クローム:

  • しかし、ページの読み込み後の最初の使用ではまだ機能しません..非常に奇妙な.. 1つのオプションの最初のレンダリングの後、ブラウザのアニメーションが文字通り速く終了するようです。 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>

ジェイソン

{"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 に答える