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

Question

考虑以下结构：

名为“Regions”的表格，其中包含“id”，“name”列。

名为“Cities”的表格，其中包含“id”，“region_id”，“name”列。

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

例如，假设我有以下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);
 }

这是很多没有检查过的代码，我是在没有测试的情况下写的，但是应该让你知道从哪里开始