更改时重新生成下拉选项

Posted 2023-02-24

【中文标题】更改时重新生成下拉选项

【英文标题】：On change regenerate a dropdown options

【发布时间】：2018-04-17 09:10:58

【问题描述】：

我有一个下拉列表，当我单击一个选项时，我希望另一个下拉列表从 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 使用完全相同的国家选择，然后在另一个下拉列表中生成城市。

【问题讨论】：

实现这一目标是一条漫长但并不复杂的道路，当然有很多方法可以做到。一个非常通用的建议：在您的站点上创建以 JSON 格式生成下拉数据的端点（使用您喜欢的任何方式、多个地址或一个根据收到的 POST 或 GET 请求），然后在客户端发生下拉更新事件时使用 AJAX 向您的站点查询此数据。您可以（并且应该）重用数据库访问代码来生成一组数据，您可以从中轻松地生成 html（最初）或 JSON。

由于这个答案太宽泛了，它可能会被关闭。但我敢肯定，使用您最喜欢的搜索引擎将为您提供许多关于术语 “dropdown json ajax” 的结果和示例。

【参考方案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>

【讨论】：

target.php 应该有什么代码？从头开始生成第二个下拉列表的那个？

target.php 应该有 1) php 代码来接收 post 值； $_POST['id']、2) 数据库查询（如果需要）、3) 和回显 $result the echo serves as the return statement, this will be stored to the data variable of ajax on success event

当我测试它时，我看到它使用我想要的数据创建了一个新的下拉列表，但它不会重新生成我想要的 Dropbox。我试图改变 $("form").append(""+data+"");到表单名称，但它没有做任何事情，我将其更改为 $("prefecture_id").append(""+data+"");

@AntonisPsaroulakis 不要忘记 ID 的 # 符号。 $("#prefecture_id")。在您的代码中，prefecture_id 是 还是 元素？如果它是一个选择元素并且您想清除并放入新选项，请使用$("#prefecture_id").html(data) 数据应该是target.php返回的选项标签列表

太棒了！它正是我想要的！顺便说一句，它是一个选择元素。