是否有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事件中附上上面的代码块，但没有成功。

您有任何提示吗？提前致谢。

如果要检测用户输入，请尝试输入事件... – 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来找到元素。通过将其设置为一次变量，您不必重复搜索相同的元素，就可以将代码保存为实质性工作负载。

是否有Javascript事件可以根据用户输入不断更新DOM？

相关推荐