Проблема в зависимом выпадающем городе штата страны, используя jquery и php - PullRequest
Новая
       54

Проблема в зависимом выпадающем городе штата страны, используя jquery и php

0 голосов
/ 05 марта 2019

У меня есть 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

table3: 

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 + '"]' ) );

1 Ответ

0 голосов
/ 05 марта 2019 
//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' );
    });
});

Инициировать событие изменения в поле выбора цели.

Я также внес некоторые изменения в поля выбора, атрибут данных.

...