如何将jQuery下拉选择框改造为支持多选的复选框功能

1. 替换前端HTML结构 #

删除原有的<select>下拉框代码，替换为同组复选框，所有城市选项的class统一为city_check，name属性加[]标识为数组类型：

<form action="" class="row login_form">
  <div class="city-select-wrap">
    <label><input type="checkbox" class="city_check" name="city_box[]" value="newyork"> New York</label>
    <label><input type="checkbox" class="city_check" name="city_box[]" value="london"> London</label>
    <label><input type="checkbox" class="city_check" name="city_box[]" value="tokyo"> Tokyo</label>
    <label><input type="checkbox" class="city_check" name="city_box[]" value="paris"> Paris</label>
  </div>
</form>

你可以自行给外层的.city-select-wrap添加样式，控制复选框排列间距、布局效果。

2. 调整JS交互逻辑 #

原来的逻辑是直接取下拉框的单个值，现在需要新增公共方法收集所有选中的复选框值，同时把原来绑定在下拉框上的change事件改为绑定到复选框上，修改后的完整JS代码如下：

<script>
$(document).ready(function(){
  load_data(1);

  // 统一获取选中的城市数组
  function getCheckedCities() {
    return $('.city_check:checked').map(function() {
      return $(this).val();
    }).get();
  }

  function load_data(page,query,city)
  {  
    $.ajax({
      url:"fetch_data.php",
      method:"POST",
      data:{page:page, query:query, city:city},
      success:function(data)
      {
        $('#dynamic_content').html(data);
      }
    });
  }

  // 分页点击逻辑
  $(document).on('click', '.page-link', function(){
    var page = $(this).data('page_number');
    var query = $('#search_box').val();
    var city = getCheckedCities();
    load_data(page, query, city);
  });

  // 搜索框输入触发查询
  $('#search_box').keyup(function () {
      var query = $('#search_box').val();
      var city = getCheckedCities();
      load_data(1, query, city);
  });

  // 复选框勾选/取消触发查询
  $(document).on('change', '.city_check', function () {
      var query = $('#search_box').val();
      var city = getCheckedCities();
      load_data(1, query, city);
  }); 
});
</script>

3. 后端逻辑适配 #

因为前端现在提交的city参数是数组格式（比如选中纽约和伦敦时，提交值为["newyork", "london"]），你需要修改fetch_data.php里的查询逻辑：

• 未选中任何城市时，不追加城市筛选条件，返回全量城市结果
• 有选中城市时，不要用原来的单值等于判断，改用IN语句匹配多值，注意做好SQL注入防护，对传入的数组值做转义后再拼接查询条件

注意：不要漏写复选框name属性后的[]，否则提交时只会识别最后一个选中的选项值，无法正确传递多选项。

内容的提问来源于stack exchange，提问作者bre