Question

我对JS很新，我计划很快学习一些PHP。

所以我有一组三个选择框：书的章节，起始页和结束页。每当用户选择一个章节时，我希望其他两个选择框适当更新（从第1页到该特定章节的长度）。我能够用以下内容完成此操作（我最终将用case块替换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事件中包含上面的代码块，但没有成功。

你有什么提示吗？提前谢谢。

Answer 1

您需要将其包装在一个事件中，在这种情况下很可能是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以查找元素。通过将其设置为变量一次，您可以通过不必重复搜索相同的元素来为代码节省大量工作量。

是否有基于用户输入不断更新DOM的Javascript事件？

1 个答案: