Ytukyg

I have a select box on a page that, when you choose a value it will automatically go to that page using the id parameter set in the URL string. The form works well, until I try to add to it the code that brings in and matches the URL parameter to automatically be selected. Now, when you choose a new value, it redirects to --selected-- instead of the page URL with the new value.

If I manually load the page, i.e. vbijjaar.php?id=2017, the page loads just fine, the select menu displays 2017. But now, when I choose, 2018 or 2016 or other in the menu, as I've indicated above, it just goes to --select-- instead of vbijjaar.php?id=xxx

I'm not seeing any errors, either.

<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>  

Generated HTML code:

<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>

In your loop you have a logical error:

<?php echo $id ?>

should be:

<?php echo $j; ?>

$j is the year and $id is fixed and the previous value in the url, so once it is wrong, it will not change.

Edit: Additionally, you need the value of the selected option, not the value of the select box.

So this:

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

Should be something like:

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