我对 JS 还很陌生，我计划很快学习一些 PHP。
所以我有一组三个选择框:书籍的章节、起始页和结束页。每当用户选择一个章节时，我希望其他两个选择框能够适当更新(从第 1 页到该特定章节的长度)。我可以通过以下方式做到这一点(我最终将用 case block 替换 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 事件中，但没有成功。
你有什么建议吗？提前致谢。
最佳答案
您需要将其包装在一个事件中，在本例中很可能是 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 - 是否有一个 Javascript 事件可以根据用户输入不断更新 DOM？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40772831/