gpt4 book ai didi

javascript - 是否有一个 Javascript 事件可以根据用户输入不断更新 DOM?

转载 作者:行者123 更新时间:2023-12-01 05:24:08 25 4
gpt4 key购买 nike

我对 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com