更改选择选项时，再次从数据库获取数据

Question

I have a select dropdown like this:

<select name="city" id="order_form_select">
    <option value="" disabled selected>Ort ↓</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

And I'm getting some radio buttons like this:

<?php
$statement = $pdo->prepare('SELECT some_column FROM my_table WHERE some_value = "abc" AND city = :city');
$statement->execute(array('city' => $city));
$row = $statement->rowCount();
if ($row == 0) {
   echo "<input type=\"radio\" name=\"something\" value=\"option1\">Option 1</p>";
}

$statement = $pdo->prepare('SELECT some_column FROM my_table WHERE some_value = "xyz" AND city = :city');
$statement->execute(array('city' => $city));
$row = $statement->rowCount();
if ($row == 0) {
    echo "<input type=\"radio\" name=\"something\" value=\"option2\">Option 2</p>";
}
?>

As you can see, these radio buttons are depending on the select option choice. That means, as soon as the user changes the selects option, the PHP code have to refresh but the select boxes choice has to stay logged in.

What is the proper/common way to do this?

Answer 1

Supossing that you wanna refresh your page every time you choose a value:

1. create this javascript

    <script type="text/javascript"> window.onload = function () { var citySelector = document.getElementById('order_form_select'); citySelector.addEventListener('change', function () { if (this.value) { window.location = 'yourphp.php?city=' + this.value } }, false); } </script> 

2. In your html code, add value to your options:

<select name="city" id="order_form_select">
    <option value="" disabled selected>Ort ↓</option>
    <option value="City1">Option 1</option>
    <option value="City2">Option 2</option>
    <option value="City3">Option 3</option>
    <option value="City4">Option 4</option>
</select>

3. To maintain the value after refresh:

<select name="city" id="order_form_select">
    <option value="" disabled <?php echo !isset($_GET['city']) ? 'selected' : ''; ?>>Ort ↓</option>
    <option value="City1" <?php echo isset($_GET['city']) && $_GET['city'] == 'City1' ? 'selected' : ''; ?>>Option 1</option>
    <option value="City2" <?php echo isset($_GET['city']) && $_GET['city'] == 'City2' ? 'selected' : ''; ?>>Option 2</option>
    <option value="City3" <?php echo isset($_GET['city']) && $_GET['city'] == 'City3' ? 'selected' : ''; ?>>Option 3</option>
    <option value="City4" <?php echo isset($_GET['city']) && $_GET['city'] == 'City4' ? 'selected' : ''; ?>>Option 4</option>
</select>

Edited version:

If you want avoid the use of javascript to do this task you can change your approach like that:

<form action="yourphpfile.php" method="GET">
  <select name="city" id="order_form_select">
    <option value="" disabled <?php echo !isset($_GET['city']) ? 'selected' : ''; ?>>Ort ↓</option>
    <option value="City1" <?php echo isset($_GET['city']) && $_GET['city'] == 'City1' ? 'selected' : ''; ?>>Option 1</option>
    <option value="City2" <?php echo isset($_GET['city']) && $_GET['city'] == 'City2' ? 'selected' : ''; ?>>Option 2</option>
    <option value="City3" <?php echo isset($_GET['city']) && $_GET['city'] == 'City3' ? 'selected' : ''; ?>>Option 3</option>
    <option value="City4" <?php echo isset($_GET['city']) && $_GET['city'] == 'City4' ? 'selected' : ''; ?>>Option 4</option>
    </select>
 <input type="submit" value="search by city">
</form>

Hope this helps you