使用 jquery 和 php 的依赖国家/地区城市下拉列表中的问题

Question

我有 3 个表。

表 1:

Country_id |   Country
________________________
   5     | United States
   6     | Russia
   7     | Germany

表 2:

state_id | state     | Country_id
______________________________
 19       | California |  5 
 20       | Bavaria    |  7
 21       | Sakha      |  6

表 3:

city_id|     city  | state_id
_______________________________
30        | Los Angles |   19
31        | Alabama    |   19
32        | Santa Cruz |   19

我的html和php代码：

国家select框：

<select class="form-control text-center" name="country" id="country" >
    <option value="">select</option>
    <?php
        $get_user20="SELECT * FROM country";            
        $get_user21 = mysqli_query($conn, $get_user20);
        while($data_user22=mysqli_fetch_assoc($get_user21))
        {
            echo'<option value="'.$data_user22['country_id'].'"><h5>'.$data_user22['country'].'</h5></option>';
        }
    ?>
</select>

状态select框：

<select class="form-control text-center" name="state" id="state" >
    <option value="">select</option>
    <?php
        $get_user20="SELECT * FROM state";          
        $get_user21 = mysqli_query($conn, $get_user20);
        while($data_user22=mysqli_fetch_assoc($get_user21))
        {
            echo'<option value="'.$data_user22['country_id'].'"><h5>'.$data_user22['state'].'</h5></option>';
        }
    ?>
</select>

城市select框：

<select class="form-control text-center" name="city" id="city" >
    <option value="">select</option>
    <?php
        $get_user20="SELECT * FROM city";           
        $get_user21 = mysqli_query($conn, $get_user20);
        while($data_user22=mysqli_fetch_assoc($get_user21))
        {
            echo'<option value="'.$data_user22['state_id'].'"><h5>'.$data_user22['city'].'</h5></option>';
        }
    ?>
</select>

Picture of the select boxes

我使用以下 jQuery 代码：

var $select1 = $( '#Country' ),
$select2 = $( '#state' ),
$select3 = $( '#city' ),
$options = $select2.find( 'option' );
$options3 = $select3.find( 'option' );

$select1.on( 'change', function() {
$select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );

$select2.on( 'change', function() {
$select3.html( $options3.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );

只有国家和州显示正确。问题是没有显示城市信息。

我觉得问题出在这部分。未正确接收值的地方：

$select3.html( $options3.filter( '[value="' + this.value + '"]' ) );

Answer 1

//country select box:
<select class="form-control text-center" name="country" id="country" >
    <option value="">select</option>
    <?php
    $get_user20="SELECT * FROM country";            
    $get_user21 = mysqli_query($conn, $get_user20);
    while($data_user22=mysqli_fetch_assoc($get_user21))
    {
        echo'<option value="'.$data_user22['country_id'].'"><h5>'.$data_user22['country'].'</h5></option>';
    }
    ?>
</select>

//state select box:
<select class="form-control text-center" name="state" id="state" >
    <option value="">select</option>
    <?php
    $get_user20="SELECT * FROM state";          
    $get_user21 = mysqli_query($conn, $get_user20);
    while($data_user22=mysqli_fetch_assoc($get_user21))
    {
        echo'<option value="'.$data_user22['state_id'].'" data-country="'.$data_user22['country_id'].'"><h5>'.$data_user22['state'].'</h5></option>';
    }
    ?>
</select>

//city select box:
<select class="form-control text-center" name="city" id="city" >
    <option value="">select</option>
    <?php
    $get_user20="SELECT * FROM city";           
    $get_user21 = mysqli_query($conn, $get_user20);
    while($data_user22=mysqli_fetch_assoc($get_user21))
    {
        echo'<option value="'.$data_user22['city_id'].'" data-state="'.$data_user22['state_id'].'"><h5>'.$data_user22['city'].'</h5></option>';
    }
    ?>
</select>


$(function(){
    var $select1 = $( '#country' ),
    $select2 = $( '#state' ),
    $select3 = $( '#city' );
    $options = $select2.find( 'option' );
    $options3 = $select3.find( 'option' );

    $select1.on( 'change', function() {
        $select2.html( $options.filter( '[data-country="' + this.value + '"]' ) ).trigger( 'change' );
    });

    $select2.on( 'change', function() {
        $select3.html( $options3.filter( '[data-state="' + this.value + '"]' ) ).trigger( 'change' );
    });
});

触发目标 select 框上的更改事件。

我也对 select 框做了一些更改，数据属性。

使用 jquery 和 php 的依赖国家/地区城市下拉列表中的问题

Problem in dependent country state city dropdown using jquery and php

php

jquery

jquery-selectbox

drop-down-menu