链接选择框（国家，州，城市）

小编典典

链接选择框（国家，州，城市）

ajax

我有一个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之间进行引用。注意：我知道此代码段确实很糟糕，并且包含错误。我的想法是要具有执行以下操作的脚本功能：

清除州选择框中的所有选项（假设您已经更改了国家选择）
遍历提供的状态列表（控制器传递的SQL查询）
对于每个具有“ country_id”与所选country_id匹配的条目，在“状态”选择框中放置一个选择选项

^如果可能的话，这太棒了。任何其他方法也都不错，但是我尝试使用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>

阅读 247

2020-07-26

共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();

2020-07-26