链式选择框（国家、州、城市）

Question

我有一个 php 页面，我想在其中从国家、州和城市列表中选择一个位置。该页面包含用户注册的其他数据（姓名、电子邮件等），因此我不想在选择框刷新时刷新页面或任何内容。目前，每个选择框只加载国家、州或城市的完整列表。我希望它们被链接起来，所以我没有重复的城市名称（不同州或国家/地区的名称相同）。

位置存储在数据库中，并在加载时传递到页面。然后将它们循环并添加到选择框中：

<tr>
    <label>Select State: </label>
    <select name="state" id="state_select" style="width:200px;">
        <option value="">Select a State or Province</option>
        <?php while($state = $states->fetchObject()) { ?>
             <option value="<?php echo $state->id; ?>"><?php echo $state->title; ?></option>
        <?php } ?>
    </select>
</tr>

数据库结构非常简单：

Country : | id | title |
State : | id | title | country_id |
City : | id | title | state_id |

我可以在 .onChange() 语句中想到应该清除链接的选择框并附加新选项的逻辑，但是我对基于 Web 的语言非常陌生，并且无法进行任何操作。以下是我的尝试，但我想我无法轻松地在 js 和 php 之间进行引用。注意：我知道这个片段非常糟糕并且包含错​​误。我的想法是有一个执行以下操作的脚本函数：

1. 清除 State 选择框中的所有选项（假设您已更改国家/地区选择）
2. 循环提供的状态列表（控制器传递的 SQL 查询）
3. 为每个具有与所选 country_id 匹配的 'country_id' 的条目在 State 选择框中放置一个选择选项

^ 如果可能的话，这将是非常棒的。任何其他方法也很好，但我尝试使用 ajax 和 JSON 方法，老实说我不理解它们。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<script>
    $( document ).ready(function() {
        $('#country_select').change(function(){
            $('#state_select').empty();
            //for each state
            <?php while($state = $states->fetchObject()) {
                $temp = $('#country_select').val()); 
                //if country matches selected country 
                if($state->country_id == $temp){
                    // create an option ?>
                    var option = '<option value="">Test</option>';
                <?php// } 
                //then append that option?>
                 <?php// } ?>
             $('#state_select').append(option);
           });
        });
    </script>

Answer 1

$('#mobile_phone_network option:selected').val() 我没有测试，但它应该可以工作。这很简单，它会给你一些想法

**HTML**
<div id="countryWrap"><select id="country" name="country"></select></div>
<div id="stateWrap"><select id="state" name="state"></select></div>
<div id="cityWrap"><select id="city" name="city"></select></div>

<script>
$(document).ready(function(){
  $('#country').change(function(){
    loadState($(this).find(':selected').val())
  })
  $('#state').change(function(){
    loadCity($(this).find(':selected').val())
  })


})

function loadCountry(){
        $.ajax({
            type: "POST",
            url: "ajax/ajax.php",
            data: "get=country"
            }).done(function( result ) {
                $(result).each(function(){
                    $("#country").append($('<option>', {
                        value: this.id,
                        text: this.name,
                    }));
                })
            });
}
function loadState(countryId){
        $("#state").children().remove()
        $.ajax({
            type: "POST",
            url: "ajax/ajax.php",
            data: "get=state&countryId=" + countryId
            }).done(function( result ) {
                $(result).each(function(){
                    $("#state").append($('<option>', {
                        value: this.id,
                        text: this.name,
                    }));
                })
            });
}
function loadCity(stateId){
        $("#city").children().remove()
        $.ajax({
            type: "POST",
            url: "ajax/ajax.php",
            data: "get=city&stateId=" + stateId
            }).done(function( result ) {
                $(result).each(function(){
                    $("#city").append($('<option>', {
                        value: this.id,
                        text: this.name,
                    }));
                })
            });
}

// init the countries
loadCountry();
</script>




**ajax.php** 

$countryId = isset($_POST['countryId'])  ? $_POST['countryId'] : 0;
$stateId = isset($_POST['stateId'])  ? $_POST['stateId'] : 0;
$command = isset($_POST['get'])  ? $_POST['get'] : "";

switch($command){
case "country":
$statement = "SELECT id, name FROM country";
break;
case "state":
$statement = "SELECT id, name FROM state WHERE country_id=".(int)countryId;
break;
case "city":
$statement = "SELECT id, name FROM country WHERE state_id=".(int)stateId;
break;
default:
break;
}

$sth = $dbh->prepare($statement);
$sth->execute();
$result = $sth->fetchAll();

echo json_encode($result);
exit();