ユーザー入力に基づいてDOMを常に更新するJavascriptイベントはありますか？

私はかなりJSに新しく、すぐにいくつかのPHPを学ぶ予定です。ユーザー入力に基づいてDOMを常に更新するJavascriptイベントはありますか？

私は、ブックの章、開始ページ、および終了ページの3つの選択ボックスのセットを持っています。ユーザーがチャプターを選択するたびに、他の2つの選択ボックスを適切に（1ページから特定のチャプターの長さまで）更新します。私は（私が最終的にケースブロックとif文を置き換えます）以下でこれを行うことができました：

var chapter = $("#chapter option:selected").val(); 
if (chapter == 1) 
{ 
    $('#page_start').empty(); 
    $('#page_end').empty(); 
    var n = 7; 
    for (var i=1; i<=n; i++) 
    { 
     var o = new Option(i, i); 
     $("#page_start").append(o); 
     var p = new Option(i, i); 
     $("#page_end").append(p); 
    } 
}

しかし、私の問題は、ユーザが、第1章を選択した場合、このコードはのみ実行されることで、その後、リフレッシュページ。私は、ユーザーが彼/彼女の選択の直後に変更を見ることができるようにしたい。私にこれを可能にするJavaScriptイベントがありますか？私は上記のコードブロックをdocument.readyイベントに入れてみましたが、成功しませんでした。

ヒントはありますか？前もって感謝します。

出典

2016-11-23 masshakar

ユーザ入力を検出したい場合は、 'input'イベントを試... – Bergi

[mcve]でHTMLとスクリプトが必要です。 – zer00ne

このイベントは、おそらくchangeとなる可能性が高いイベントでラップする必要があります。

$(document).ready(function() { 

    $pageStart = $('#page_start'); 
    $pageEnd = $('#page_end'); 

    $("#chapter").on('change', function() { 

     var chapter = $(this).find("option:selected").val(); 
     if (chapter == 1) 
     { 

      $pageStart.empty(); 
      $pageEnd.empty(); 
      var n = 7; 
      for (var i=1; i<=n; i++) 
      { 
       var o = new Option(i, i); 
       $pageStart.append(o); 
       var p = new Option(i, i); 
       $pageEnd.append(p); 
      } 
     } 

    }); 

});

あなたのコードは<head>である、あなたは、私が上記の持っているよう$(document).ready(function() { ... });でそれをラップする必要がありますと仮定：#chapter変更はときに、この特定のコードが実行されます。これは、リスナーを適用している要素（#chapter）がロードされていることを確認し、参照しようとすると見つかるようにするためです。

また、私はあなたの#page_startと#page_end要素を変数に設定していることに気づくでしょう。これは、あなたが$('#page_start')を実行するたびにDOMを走査して要素を見つけるためです。これを変数に1回設定することで、同じ要素を繰り返し検索する必要がなくなるため、コードに大幅な作業負荷を節約できます。

出典

2016-11-23 19:40:02 Santi

ユーザー入力に基づいてDOMを常に更新するJavascriptイベントはありますか？

答えて

関連する問題