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

Question

Consider the following structure:

A table named "Regions" with the columns "id","name".

A table named "Cities" with the columns "id","region_id","name".

What is the best way to repopulate an html select options using PHP and Javascript?

For example lets say I have the following php code:

<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>

Once a region has been selected, all the cities with the proper foreign key "region_id" that corresponds to the selected region, will be populated into the cities select.

Assume that I use this kind of structure a lot, so I do want to have a minimal, easy to reuse code.

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);
 }

it's lots of not checked code, i was writing it without testing, but should give you idea where to start