-1

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

选择框的图片

我使用以下 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 + '"]' ) );
4

1 回答 1

0 
//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' );
    });
});

在目标选择框上触发 change 事件。

我也对选择框进行了一些更改，即数据属性。

于 2019-03-05T07:18:01.880 回答