使用PHP和Javascript和JQuery选择另一个选择选项后，更新html选择选项

Question

考虑以下结构：

一个名为“ Regions”的表，其列为“ id”，“ name”。

一个名为“ Cities”的表，其列为“ id”，“ region_id”，“ name”。

使用PHP和Javascript重新填充html select选项的最佳方法是什么？

例如，假设我有以下php代码：

<select name = "region">
<option value = "">Select Region</option>
<?
 foreach ($regions as $region)
 {
  echo "<option value = '$region[id]'>region[name]</option>";
 }
?>
</select>

<select name = "city">
 <option value = "">Select City</option>
</select>

选择区域后，所有具有与所选区域相对应的外键“ region_id”正确的城市将被填充到选择的城市中。

假设我经常使用这种结构，所以我确实希望有一个最少的，易于重用的代码。

Answer 1

HTML

<select class="selectbox" name = "region" data-table="regions" data-parent="parent_id" data-name="name" data-target="targetselect">
    <option value = "">Select Region</option>
    <? foreach ($regions as $region): ?>
    <option value = '<?php echo $region[id];?>'><?php echo region[name]; ?></option>
    <?php endforeach;?>
</select>

<select name = "city" class="targetselect">
    <option value = "">Select City</option>
</select>

* JS *

jQuery(document).ready(function($){
    $('.selectbox').on('change', function(e) {
        var target = $(this).data('target');
        var data = $(this).data();
        data.key = $(this).val();            

        $.ajax({
            url: 'ajax.php',
            data: data,
            type: 'POST'
        }).success(function(response){
            //check if response
            if(response.items) {
                 $.each(response.items, function(){
                     target.append($('<option></option>')
                         .attr('value', this.id)
                         .text(this.name));
                 });
            }
        });
    })
});

* PHP *

/***
 * Check if You have all required data
 **/

 if(isset($_POST['table']) &&  .... ) {
     /**
      * Do all security checks for example if table is allowed to query etc
      **/
     $query = 'SELECT required_cols ....';
     $result = /** Query results **/;
     echo json_encode($result, true);
 }

它有很多未经检查的代码，我是在未经测试的情况下编写的，但应该让您知道从哪里开始