基于URL变更实现双下拉选择框筛选的问题排查

问题分析与修复 #

你的代码无法运行主要是JavaScript语法错误，还有一处HTML文本错误，以下是具体问题和修正后的代码：

错误点说明

• JavaScript选择器错误：获取年份下拉框时，id选择器缺少#前缀，原代码$('select_year')应改为$('#select_year')
• 字符串拼接语法错误：URL拼接时，$('#select_year').val()后缺少+号，导致语法中断
• HTML选项文本错误：第二个大洲选项的显示文本与value不匹配，value="Americas/Central/South/Latin/"对应的显示文本误写为Africa，需修正为Americas

修正后的HTML代码

<form class="form-inline">
  <label>Select Year: </label>
  <select class="form-control input-sm" id="select_year">
    <?php                         
      date_default_timezone_set('Africa/Johannesburg');
      $today = date('y-m-d');
      $year = date('Y');
      $currentyear = date('Y');
      if(isset($_GET['year'])){
        $year = $_GET['year'];
      }
      for($i=2019; $i<=$currentyear; $i++){
        $selected = ($i==$year)?'selected':'';
        echo "
          <option value='".$i."' ".$selected.">".$i."</option>
        ";
      }
    ?>
  </select>
  <label>Select Continent: </label>
  <select class="form-control input-sm" id="select_continent">
    <option value="Africa">Africa</option>
    <option value="Americas/Central/South/Latin/">Americas</option>
    <option value="Asia">Asia</option>
    <option value="Australia">Australia</option>
    <option value="Europe">Europe</option>
  </select>
  <button type="button" id="filter-form">Filter</button>
</form>

修正后的JavaScript代码

$(function(){
  $('#filter-form').click(function(){
    window.location.href = 'view-report.php?year=' + $('#select_year').val() + '&continent=' + $('#select_continent').val();
  });
});

可选优化方案（无需JavaScript） #

可以直接用表单GET提交实现筛选，省去JS逻辑，还能自动保留筛选后的选中状态：

<form class="form-inline" action="view-report.php" method="get">
  <label>Select Year: </label>
  <select class="form-control input-sm" name="year" id="select_year">
    <?php                         
      date_default_timezone_set('Africa/Johannesburg');
      $today = date('y-m-d');
      $year = date('Y');
      $currentyear = date('Y');
      if(isset($_GET['year'])){
        $year = $_GET['year'];
      }
      for($i=2019; $i<=$currentyear; $i++){
        $selected = ($i==$year)?'selected':'';
        echo "
          <option value='".$i."' ".$selected.">".$i."</option>
        ";
      }
    ?>
  </select>
  <label>Select Continent: </label>
  <select class="form-control input-sm" name="continent" id="select_continent">
    <option value="Africa" <?= isset($_GET['continent']) && $_GET['continent'] == 'Africa' ? 'selected' : '' ?>>Africa</option>
    <option value="Americas/Central/South/Latin/" <?= isset($_GET['continent']) && $_GET['continent'] == 'Americas/Central/South/Latin/' ? 'selected' : '' ?>>Americas</option>
    <option value="Asia" <?= isset($_GET['continent']) && $_GET['continent'] == 'Asia' ? 'selected' : '' ?>>Asia</option>
    <option value="Australia" <?= isset($_GET['continent']) && $_GET['continent'] == 'Australia' ? 'selected' : '' ?>>Australia</option>
    <option value="Europe" <?= isset($_GET['continent']) && $_GET['continent'] == 'Europe' ? 'selected' : '' ?>>Europe</option>
  </select>
  <button type="submit">Filter</button>
</form>

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