こんにちは。お世話になります。よろしくお願いいたします。

**やりたいこと**  
Javascript/Jquery/PHPのどれかを使って以下リンク先のようなことができるようにしたいです。

[JavaScriptを使用してテーブルの表示行数を3行、5行、10行とユーザーが自由に切り替えられるようにする方法](https://incloop.com/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%8C%E8%87%AA%E7%94%B1%E3%81%AB%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E8%A1%A8%E7%A4%BA%E6%95%B0%E3%82%92%E5%A4%89%E6%9B%B4/)

色々調べたのですが、見合った情報が見つけられませんでしたので、こちらで質問させていただいた次第です。

**以下、コードを記載します。**

```

    //プルダウン設置
    <div>　　
            <span>Show :</span>  
            <select id="list-num" onchange="change_table()">
                <option value="30" selected>30</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
    </div>
        
    //データ取り込み＆配列の作成    
        <?php
        define('API_HOST', 'localhost');
        define('API_USER', 'root');
        define('API_PASSWORD', '');
        define('API_NAME', 'parties');
        $dbc = mysqli_connect(API_HOST, API_USER, API_PASSWORD, API_NAME) or die('Error connecting to database...');
        $query = "SELECT `s_id`, `s_asset`, `s_status`, `s_lots`, `s_price`, `s_date`, `s_market`, `s_type` FROM `parties` WHERE `s_date` BETWEEN DATE(NOW()) - INTERVAL 5 DAY AND DATE(NOW()) ORDER BY `s_id` DESC";
        $data = mysqli_query($dbc, $query) or die('Data connection lost.');
        
        $msList = [];
        while ($row = mysqli_fetch_array($data)) { 
            $id = $row['s_id'];
            $signal = strtoupper($row['s_asset']);
            $status = $row['s_status'];
            $lots = $row['s_lots'] . ' Lot MAX';
            $price = $row['s_price'];
            $market = $row['s_market']; 
            $type = $row['s_type'];
        
            $msList[$id] = Array($signal, $price, $date, $time, $lots, $status, $type, $market);
        }
        
    //ループでechoしている内容    (このデータの行数を変えられるようにしたい）
        foreach ($msList as $id => $ms) {　　　
            echo '<div class="list-data">
                      <h2>'.$ms[0].'</h3>'.$ms[6].'
                      <h3>'.$ms[1].'</h3> 
                      <div>
                          <p>'.$ms[2].'&nbsp;'.$ms[3].'</p>
                      </div>
                  </div>';
        }
        ?>
    
```

**わからない点について追記**  
現状作ったコードは下記です。下記のような感じ？のコードの流れになるのかなと思っております。

```

          <script type="text/javascript">
                function change_num(){
                    var selectNum = document.getElementById('list-num');  //プルダウンのselectを取得
                    var listData = document.getElementsByClassName('list-data');　//1データ
                    var n = selectNum.getAttribute("value");  //選択された行数を取得
    
                    for(i=0; i<n; i++){
                        n番目までのデータをechoする
                    }
                }
    
    そして、上記のforeach内でこのfunctionを呼び出すようにする。
    
```

難しく考えすぎているのでしょうか、 **どうやって選択された行数を取得すればよいのか** 、また
**次のページが必要な場合それをどのようにコードに反映させればよいのか** がわからない状況です。

サンプルとなるようなコードを教えていただければ大変助かります。  
どうぞよろしくお願いいたします。
CC BY-SA 4.0
2020-11-21T10:19:07.093
72122
2020-11-21T19:30:52.673
2020-11-21T19:30:52.673
40891
40891
question
javascript php
ループによって表示させているリストの表示行数を、プルダウンで選択できるようにしたい