JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<select id="page_selector">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
    <li>eleven</li>
    <li>twelve</li>
    <li>thirteen</li>
    <li>fourteen</li>
</ul>
    <br>
    <div id="debug"></div>

JavaScript

$(function(){
    var page_size = 5;
    
    $('#page_selector').change(function(){
        var page = $(this).val()
            end = page * page_size,
            start = end - page_size;
        
        $('li').hide();
        
        $('li').slice( start, end ).show();
        
        $('#debug').text('showing '+page_size+' items in page '+page+': items greater than '+start);
        
    })

     $('#page_selector').change();
});