jquery 下拉列表分页

<select id="mySelect" size="10"></select>
<button id="prevPage">Previous</button>
<button id="nextPage">Next</button>

$(document).ready(function() {
    let currentPage = 1;
    const pageSize = 10;
    const totalItems = 100; // 假设总共有100个选项

    function loadPage(page) {
        $.ajax({
            url: 'your-server-endpoint', // 替换为你的服务器端点
            method: 'GET',
            data: { page: page, pageSize: pageSize },
            success: function(data) {
                $('#mySelect').empty();
                data.forEach(item => {
                    $('#mySelect').append($('<option>', { value: item.id, text: item.name }));
                });
            },
            error: function(xhr, status, error) {
                console.error('Error loading page:', error);
            }
        });
    }

    $('#prevPage').click(function() {
        if (currentPage > 1) {
            currentPage--;
            loadPage(currentPage);
        }
    });

    $('#nextPage').click(function() {
        if (currentPage < Math.ceil(totalItems / pageSize)) {
            currentPage++;
            loadPage(currentPage);
        }
    });

    // 初始加载第一页
    loadPage(currentPage);
});