通过更换option选项改变获取表内容？

Question

我想做个能获取指定表内容的下拉列表，参考各大网站下拉选择网站语言的那个东西。
前置条件如下，MySQL数据库中t_br表s_state有三种状态，0-未查看，1-已签收，2-已退回。
(前文已进行数据库连接，不赘述)

<select>
<option selected>未查看</option>
<option>全部</option>
<option>已签收</option>
<option>已退货</option>
</select>
<table>
<?php while($rows=mysql_fetch_assoc($rs)){
?>
<tr>
<td>快件编号</td>
<td>送达时间</td>
<td>快件类型</td>
<td>当前状态</td>
</tr>
<tr>
<td><?php echo $rows["s_id"]?></td>
<td><?php echo $rows["s_time"]?></td>
<td><?php echo $rows["s_type"]?></td>
<td><?php echo $rows["s_state"]?></td>
</tr>
<?php } ?>
(此处为分页的代码)
</table>

我自己查了一下，像网站变更语言一般用到的是js+插件，我这个网站只是毕业设计，暂时还不需要考虑插件的问题，因此做了两个设想，一种是通过option进行网页的转换，每个页面进行一次条件查询，写起来比较麻烦，另一种是直接在本页面每次切换选项进行一次查询，比较方便，但我不会。
希望答题者最好抽空教教我，需要附代码，我太笨。

Answer 1

1、在 HTML 中定义下拉列表框和表格。

<select id="state">
  <option value="">未查看</option>
  <option value="">全部</option>
  <option value="1">已签收</option>
  <option value="2">已退货</option>
</select>

<table id="table">
  <tr>
    <th>快件编号</th>
    <th>送达时间</th>
    <th>快件类型</th>
    <th>当前状态</th>
  </tr>
</table>

2、在 JavaScript 中使用 jQuery 的 change 事件监听下拉列表框的选项变化。

$(document).ready(function() {
  $('#state').change(function() {
    // 获取当前选中的选项的值
    var state = $(this).val();
    // 发送查询请求
    query(state);
  });
});

3、在 JavaScript 中编写 query 函数用于发送查询请求。

function query(state) {
  // 发送查询请求
  $.ajax({
    url: 'query.php',
    type: 'POST',
    data: {state: state},
    success: function(data) {
      // 处理查询结果
      updateTable(data);
    }
  });
}

4、在 query.php 中接收请求并执⾏查询。

<?php
// 连接数据库
$conn = mysql_connect('localhost', 'root', 'password');
mysql_select_db('database_name', $conn);

// 接收请求参数
$state = $_POST['state'];

// 执⾏查询
$sql = "SELECT * FROM t_br WHERE s_state='$state'";
$result = mysql_query($sql, $conn);

// 返回查询结果
$rows = array();
while ($row = mysql_fetch_assoc($result)) {
$rows[] = $row;
}
echo json_encode($rows);

// 关闭数据库连接
mysql_close($conn);
?>

1. 在 JavaScript 中编写 updateTable 函数用于更新表格。

   function updateTable(data) {
   // 清空表格
   $('#table tr:not(:first)').remove();
   // 遍历查询结果
   $.each(data, function(index, row) {
    // 构建行元素
    var tr = $('<tr></tr>');
    tr.append($('<td></td>').text(row.s_id));
    tr.append($('<td></td>').text(row.s_time));
    tr.append($('<td></td>').text(row.s_type));
    tr.append($('<td></td>').text(row.s_state));
    // 添加行元素
    $('#table').append(tr);
   });
   }