jQuery页面URL加载选择奇怪的行为

Question

我在页面上有一个选择框，当您选择一个值时，它将使用 URL 字符串中设置的 id 参数自动转到该页面。该表单运行良好，直到我尝试向其中添加引入并匹配要自动选择的 URL 参数的代码。现在，当您选择一个新值时，它会重定向到 --selected-- 而不是具有新值的页面 URL。

如果我手动加载页面，即 vbijjaar.php?id=2017，页面加载正常，选择菜单显示 2017。但是现在，当我在菜单中选择 2018 或 2016 或其他时，因为我'上面已经指出，它只是转到 --select-- 而不是 vbijjaar.php?id=xxx

我也没有看到任何错误。

<form >
<select class="js-example-basic-single js-states form-control" name="jaar" id="urlSelect" onchange="window.location = jQuery('#urlSelect option:selected').val();">

       <?php
       ini_set('display_errors',1);
        error_reporting(E_ALL);

        $conn = new mysqli('localhost', 'xxx', 'xxxx', 'xxx');
        $result = mysqli_query($conn, "SELECT YEAR(vertrekdatum2) AS year FROM tbl_vluchtgegevens GROUP BY YEAR(vertrekdatum2) ORDER BY YEAR(vertrekdatum2) DESC ");

            while($row2 = mysqli_fetch_array($result))
                            {   
                $id = mysqli_real_escape_string($conn, $_GET['id']); 
                $j = $row2['year'];
       ?>
    <option value="vbijjaar.php?id=<?php echo $j ?>" <?php echo ($j == $id) ? 'selected' : '' ?>> <?php echo $j; ?> </option>
        <?php                        
            }mysqli_close($conn);
        ?>
    </select>  
<script>
    $(function(){
      // bind change event to select
      $('#urlSelect').bind('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>
<br />

</form>  

生成的 HTML 代码：

<form class="px-4 py-3">
            <div class="form-group">
              <label for="statsbyyear">Stats by Year</label>

              <select class="js-example-basic-single js-states form-control form-control-sm" width="100px" name="jaar" id="urlSelect" onchange="window.location = jQuery('#urlSelect option:selected').val();">

<option>--Select--</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2019'>2019</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2018'>2018</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2017'>2017</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2016'>2016</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2015'>2015</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2014'>2014</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2013'>2013</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2012'>2012</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2011'>2011</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2010'>2010</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2009'>2009</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2008'>2008</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2007'>2007</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2006'>2006</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2005'>2005</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2004'>2004</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2003'>2003</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2002'>2002</option>
<option value='http://globe-trekking.com/vg/en/vluchtinfo/jaar/vbijjaar.php?id=2001'>2001</option>                </select>

<script>
        $(function(){
          // bind change event to select
          $('#dynamic_select').bind('change', function () {
              var url = $(this).val(); // get selected value
              if (url) { // require a URL
                  window.location = url; // redirect
              }
              return false;
          });
        });
    </script>

                </div>
            </form>

Answer 1

在你的循环中你有一个逻辑错误：

<?php echo $id ?>

应该是：

<?php echo $j; ?>

$j是年份，$id是固定的，是url中之前的值，所以一旦错了就不会变了。

编辑：此外，您需要所选选项的值，而不是选择框的值。

所以这个：

var url = $(this).val();

应该是这样的：

var url = $(this).find(':selected').val();