使用PHP和MySQL填充基於Jquery的下拉列表

Question

我有一個國家/州/城市級聯下拉菜單。 數據使用PHP / Mysql填充。 為與一個國家相對應的州/城市選項填充數據。 還根據用戶輸入的記錄數據填充數據。 有兩個問題。

1. 當用戶輸入的數據被輸入到下拉菜單中時，加載的數據將被復制（例如，如果他輸入了美國，則會顯示另一個美國，因為它是從另一個查詢中填充值）。在這里，我們可以使用“ selected”，但是當數據是來自數據庫。

2. 第二個問題是級聯不顯示相應的條目-如果用戶輸入了USA，則級聯中不會顯示USA州和城市，盡管會顯示用戶輸入的內容。

這是視圖

Country:
<select class="addpropertyinput" name="property_country" id="country" > 
        <option value="<?php echo $data['property_country']; ?>">
        <?php   
        $country_id = $data['property_country'];
        $select = $con->prepare("SELECT country_name from tbl_country where country_id='$country_id'");
        $select->setFetchMode(PDO::FETCH_ASSOC);
        $select->execute();
        $data2 = $select->fetchAll();
        foreach ($data2 as $row1) {
        echo $row1['country_name'];
        }
        ?>
        </option>

        <?php foreach ($data1 as $row) { ?>
        <option value = "<?php echo $row['country_id']?>"><?php echo $row['country_name']?></option>
        <?php } ?>

    </select>

</div>


<div>


State:
<select class="addpropertyinput" name="property_state" id="state" > 
        <option value="<?php echo $data['property_state']; ?>"><?php echo $data['property_state']; ?></option>
    </select>

</div>



<div>


City :
    <select class="addpropertyinput" name="property_city" id="city"> 
        <option value=""><?php echo $data['property_city']; ?></option>
    </select>

</div>

這是jQuery

// Country State City Dropdown

    $('#country').on('change', function() {

        var country_id = $('#country').val();

        if (country_id == "")
            {
                $('#state').html('<option value="">State</option>');    
                $("#city").html(' <option value="">City</option>'); 

            }

        else {

        $.ajax({
                type: 'POST',
                url: '../classes/countrystatecity.php',
                data: "country_id="+country_id,
                success: function(msg) {

                $("#state").html(msg);  
                $("#city").html(' <option value="">City</option>'); 

                }
                });
    }

    });

    $('#state').on('change', function() {

        var state_id = $('#state').val();

        if (state_id == "")
            {
                $("#city").html(' <option value="">City</option>'); 

            }

        else {

    $.ajax({
            type: 'POST',
            url: '../classes/countrystatecity.php',
            data: "state_id="+state_id,
            success: function(msg) {

            $("#city").html(msg);               

            }
        }); 
    }
    });

這是模型：

$select = $con->prepare('SELECT country_id, country_name from tbl_country');
$select->setFetchMode(PDO::FETCH_ASSOC);
$select->execute();
$data1 = $select->fetchAll();

// Select State

if (!empty($_POST['country_id'])){

        $country = $_POST['country_id'];
        $select = $con->prepare("SELECT state_id, state_name from tbl_state where country_id='$country'");
        $select->setFetchMode(PDO::FETCH_ASSOC);
        $select->execute();
        $data1 = $select->fetchAll();
        ?> 
        <option value="">State</option> 
        <?php
        foreach ($data1 as $row){ ?>
        <option value = "<?php echo $row["state_id"];?>"><?php echo $row["state_name"];?></option>
<?php   
         }
}

// Select City

if (!empty($_POST['state_id'])){

        $state = $_POST['state_id'];
        $select = $con->prepare("SELECT city_id, city_name from tbl_city where state_id='$state'");
        $select->setFetchMode(PDO::FETCH_ASSOC);
        $select->execute();
        $data1 = $select->fetchAll();
        ?> 
        <option value="">City</option> <?php
        foreach ($data1 as $row){ ?>
        <option value = "<?php echo $row["city_id"];?>"><?php echo $row["city_name"];?></option>
<?php   
         }
}

Answer 1

1. Problem Solution 
Country:
<select class="addpropertyinput" name="property_country" id="country" >
    <?php foreach ($data1 as $row) { 
        $selected = '';    
        if($row['country_id'] == $data['property_country']){
            $selected = 'selected';
        } ?>
        <option value = "<?php echo $row['country_id']?>" <?php echo $selected?>><?php echo $row['country_name']?></option>
    <?php } ?>
</select>

2. Problem Solution 

$select = $con->prepare('SELECT country_id, country_name from tbl_country');
$select->setFetchMode(PDO::FETCH_ASSOC);
$select->execute();
$data1 = $select->fetchAll();

// Select State

if (!empty($_POST['country_id'])){

        $country = $_POST['country_id'];
        $select = $con->prepare("SELECT state_id, state_name from tbl_state where country_id='$country'");
        $select->setFetchMode(PDO::FETCH_ASSOC);
        $select->execute();
        $data1 = $select->fetchAll();
        $result = "<option value="">State</option>";
        foreach ($data1 as $row){ 
            $result .= "<option value=".$row["state_id"].">".$row["state_name"]."</option>";
        }
        echo $result;
}

// Select City

if (!empty($_POST['state_id'])){

        $state = $_POST['state_id'];
        $select = $con->prepare("SELECT city_id, city_name from tbl_city where state_id='$state'");
        $select->setFetchMode(PDO::FETCH_ASSOC);
        $select->execute();
        $data1 = $select->fetchAll();
        $result = "<option value="">City</option>";
        foreach ($data1 as $row){ 
            $result .= "<option value=".$row["city_id"].">".$row["city_name"]."</option>";
        }
        echo $result;
}