Javascript 更改选定选项上的变量值

我有HTML中的选择，我有javascript函数，可以在表中对数据进行分页。如何根据HTML中的选择更改var numPerPage？谢谢。

您可以这样设置numPerPage变量

<label>
    <select id="length" size="1" name="example_length" class="form-control" aria-controls="example">
        <option value="10" selected="selected">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>

    records per page</label>  

$('#tableAll').each(function () {
    var currentPage = 0;
    var numPerPage = 10;
    var $table = $(this);
    $table.bind('repaginate', function () {
        $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
    });
    $table.trigger('repaginate');
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('<div class="pager"></div>');
    for (var page = 0; page < numPages; page++) {
        $('<span class="page-number"></span>').text(page + 1).bind('click', {
            newPage: page
        }, function (event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager).addClass('clickable');
    }
    $pager.insertBefore($table).find('span.page-number:first').addClass('active');
});

然后，您可以在运行函数的地方调用它

您可以对select的更改事件进行分页

$( "#length" ).change(function() {
      var numPerPage = $("#length").val());
});

---

您有两个基本选项，可以将侦听器绑定到select元素，或者我的首选选项是在select元素上放置onChange=doFunctionthis。你喜欢其中一个吗？可以用改变功能来做吗？但是if语句$length.changefunction{$select option:selected.eachfunction{if$this.attrvalue==25{}}；}.change；看起来不错，不考虑格式，它是否按预期工作？不，因为if语句中的{}内没有任何内容…我需要将var numPerPage的值设置为25。我尝试了一些选项，但我不知道怎么做，因为var numPerPage是局部变量，我希望保持这种状态：您定义了一个局部变量，它的作用域仅在更改回调中结束

$( "#length" ).change(function() {
    var numPerPage = $(this).val();
          $('#tableAll').each(function () {
        var currentPage = 0;
        var $table = $(this);
        $table.bind('repaginate', function () {
            $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });
        $table.trigger('repaginate');
        var numRows = $table.find('tbody tr').length;
        var numPages = Math.ceil(numRows / numPerPage);
        var $pager = $('<div class="pager"></div>');
        for (var page = 0; page < numPages; page++) {
            $('<span class="page-number"></span>').text(page + 1).bind('click', {
                newPage: page
            }, function (event) {
                currentPage = event.data['newPage'];
                $table.trigger('repaginate');
                $(this).addClass('active').siblings().removeClass('active');
            }).appendTo($pager).addClass('clickable');
        }
        $pager.insertBefore($table).find('span.page-number:first').addClass('active');
    });
    });