0

私のページには、デフォルト値が（空）のドロップダウン選択ボックスがあります。ユーザーがエントリを選択すると、そのエントリ タイプに適したフォームが表示されます。

いくつかの問題..

  1. コードは DRY ではなく、必要以上に冗長に見えるため、保守や拡張が容易ではありません。
  2. ユーザーが何かを選択し、フォームに入力し、次のページに移動して [戻る] ボタンを押すと、選択フィールドはユーザーの選択によって事前に選択されますが、.change()イベントが発生していないため、フォーム ボックスは表示されません。<option>フォーラムを元に戻すには、別の を選択してから元の選択に戻る必要があります。

コードは次のとおりです。

<script type="text/javascript">
    $(document).ready(function(){

        $('#select_type').change(function () {
            $('fieldset').css('display','none'); # hide all the forms on the page
            var selectval = $('#select_type').val();
            if (selectval == 'instance')
            {
                $('#instance').toggle();
            }
            if (selectval == 'mob')
            {
                $('#mob').toggle();
            }
            if (selectval == 'dailyquest')
            {
                $('#dailyquest').toggle();
            }
            if (selectval == 'repeatablequest')
            {
                $('#repeatablequest').toggle();
            }
            if (selectval == 'zonequest')
            {
                $('#zonequest').toggle();
            }
            if (selectval == 'reward')
            {
                $('#reward').toggle();
            }
        });

    });
</script>

SO の JS 達人を助けてください!

4

4 に答える 4

7

複数の IF 句の代わりに、値の配列を反復処理できます。ただし、この場合、他に要件がない場合は、次のようにします。

$(document).ready(function(){
     var select = $('#select_type');
     $('#' + select.val()).toggle(); // Toggle the preset value
     select.change(function () {
         $('fieldset').css('display','none');
         $('#' + $(this).val()).toggle();
     });
});

十分なはずです。

于 2009-01-02T22:53:45.520 に答える
5 
$(document).ready(function() {
  $("#select_type").change(function () {
    $("fieldset").css("display", "none");
    $("#" + $(this).val()).toggle();
  }).change();
});
于 2009-01-02T23:01:07.643 に答える
0
  1. これらすべての if ステートメントを or(||) 式に変更できます。
  2. ready() で、フィールドにデフォルト値があるかどうかを確認できます。そうでない場合は、change() を手動でトリガーできます。
于 2009-01-02T22:59:41.030 に答える
0

選択ボックスは、ユーザーがオプションをプルダウンする前に知っている場合にのみ適切な選択であるため、おそらく選択ボックスは使用しません。謎肉禁止。これは、選択に依存する入力に関する優れた記事です。

この問題に対する私の見解: * 選択したオプションにリンクされたセクションのみを表示する必要があるため、トグルを使用したくありません。

$(function(){
  var sel = $("#select_type");
  $("#"+sel.val()).show();
  sel.change(function(){
    $(this).children("option").each(function(){
      $("#"+this.value)[this.selected ? "show" : "hide"]();
    });
  });
});
于 2009-01-03T00:10:03.277 に答える