是否有Javascript事件可以根據用戶輸入不斷更新DOM？

我對JS很新，我計劃很快學習一些PHP。是否有Javascript事件可以根據用戶輸入不斷更新DOM？

所以我有一套三個選擇框：書的章節，開始頁面和結束頁面。每當用戶選擇一個章節時，我都希望其他兩個選擇框適當更新（從第1頁到該特定章節的長度）。我可以用下面這樣做（我將最終取代if語句和case塊）：

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

如果要檢測用戶輸入，請嘗試輸入事件... – Bergi

需要[mcve]中的HTML和腳本， – zer00ne

你需要將它包裝在一個事件中，在這種情況下最有可能是change。這個特殊的代碼將執行時#chapter變化：

$(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）已加載，並且在我們嘗試引用它時會被找到。

您還會注意到我已將您的#page_start和#page_end元素設置爲變量。這是因爲每次你做$('#page_start')時，你都會遍歷DOM來找到元素。通過將其設置爲一次變量，您不必重複搜索相同的元素，就可以將代碼保存爲實質性工作負載。

來源

2016-11-23 19:40:02 Santi

是否有Javascript事件可以根據用戶輸入不斷更新DOM？

回答

相關問題