javascript - 更改时重新生成下拉选项

Question

我有一个下拉列表，当我单击一个选项时，我希望另一个下拉列表从 mysql 重新生成它的选项。第一个下拉列表的代码:

    <div class="form-group"> 
    <label class="col-sm-2 control-label" for="input-zone"><?php echo $_['region'];?></label> 
        <div class="col-sm-10"> 
            <select name="region_id" id="region_id" class="form-control">                    
            <?php
            include_once 'config.php';
            mysqli_query($conn,"set names 'utf8'");
            $sql = "SELECT * FROM region";
            $result = mysqli_query($conn, $sql);
            $url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; 
            while ($row = mysqli_fetch_array($result)) {
                if ((strpos($url,'/gr/') == true)) {
                    $perioxi = $row['region_greek'];
                } else {
                    $perioxi = $row['region_english'];
                }
                echo "<option value='" . $row['region_id'] ."'>" . $perioxi . "</option>";
            }
            ?>
            </select>
        </div> 
        <span class="error"><?php echo $option_value_error ?></span>
    </div> 

它从 mysql 中获取数据并生成下拉列表。第二个下拉菜单在它下面，它与第一个下拉菜单类似，但我更改了查询，我希望查询是这样的

$sql = "SELECT * FROM region_prefecture WHERE region_id = '14'";

region_id 是 sql 中的列，也是选项值。所以问题是，当我单击第一个下拉列表时，例如值 3，我希望第二个下拉列表更新来自 mysql 的数据，即列 region_id 为 3。

我知道我必须使用 javascript onchange 函数，但我不知道如何更新它。

仅供引用:opencart 在新用户注册时使用的是相同的。 Opencart 使用完全相同的国家/地区选择，然后在另一个下拉列表中生成城市。

Answer 1

你必须使用 jquery on change 和 ajax 来实现你想要的。

<script>
 $(document).on("change","#region_id",function(){
  //$.ajax request, target.php is your php code that returns new option
  $.ajax({
   url: "target.php", //target.php should contain $_POST['id'], and a that would act as a return
   method: "POST",
   data: {
    id: $("#region_id").val() //get current value of region_id and send it to target.php
   },
   dataType: "text",
   success: function(data) {
    //if target.php is reached and returned data,
    //replace the option tags of prefecture_id select element
    $("#prefecture_id").html(data); //data is list of option tags returned by target.php
   }
  });
 });
</script>