无提交按钮的select下拉菜单自动提交排序功能失效排查

你的代码无报错但功能不生效，核心是把select下拉框的表单提交逻辑和复选框的提交逻辑搞混了，具体错误点如下：

• 所有option标签的value属性都设置为空字符串，表单提交时无法传递有效的排序标识
• 后端PHP判断逻辑错误：select表单项提交的键名是标签上设置的name="filter-posts"，永远不会生成$_POST['MostPopular']、$_POST['Latest']这两个键，这也是你之前复选框逻辑能用、select不能用的核心区别——复选框每个选项是独立表单项，选中才会提交对应name的键，select是单个表单项，仅提交自身name对应的选中值
• 下拉选项默认选中态的判断逻辑错误，现在的写法是判断$_POST中是否存在对应排序名的键，实际应该判断提交的filter-posts字段值是否匹配当前选项

修正后代码 #

JS部分（原有逻辑无需修改） #

<script type="text/javascript">
$(function () {
  $('select').on('change', function () {
    $('#filter-posts-form').submit();
  });
});
</script>

表单部分 #

<form id="filter-posts-form" method="post" action="main.php">
  <div class="table-filter-group">
    <select name="filter-posts" id="filter-posts" class="filter-posts" >
      <option value="MostPopular"<?= (isset($_POST['filter-posts']) && $_POST['filter-posts'] == 'MostPopular')? ' selected' : ''?>>Most Popular</option>
      <option value="Latest"<?= (isset($_POST['filter-posts']) && $_POST['filter-posts'] == 'Latest')? ' selected' : ''?>>Latest</option>
    </select>
  </div>
</form>

后端业务判断部分 #

if(isset($_POST['filter-posts']) && $_POST['filter-posts'] == 'MostPopular'){
  // 按最热门排序的业务逻辑
}elseif(isset($_POST['filter-posts']) && $_POST['filter-posts'] == 'Latest'){
  // 按最新发布排序的业务逻辑
}

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