Problem in dependent country state city dropdown using jquery and php

Question

I have 3 tables.

table1:

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

---

table2:

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

---

table3:

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

---

my html and php code:

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['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['state_id'].'"><h5>'.$data_user22['city'].'</h5></option>';
        }
    ?>
</select>

Picture of the select boxes

I use the following jQuery code:

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

Only country and state are displayed correctly. The problem is that city information is not displayed.

I think the problem is this part. Where the value is not received correctly:

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

Trigger the change event on the target select box.

I have made some changes in select boxes too, the data attribute.