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

Question

I have a country/state/city cascading dropdown. The data is filled using PHP / Mysql. Data is filled for the state/city options corresponding to a country. Data is also filled as per the data entered by the user for his record. There are two problems.

1. Data loaded is duplicated when user entered data is fed into the dropdown (like if he entered USA, one more USA shows because it is from the other query to populate values) Here we can use "selected" but how to do that when data is coming from a database.

2. Second problem is the cascade does not show the corresponding entries - if the User entered USA then USA states and City do not get shown in the cascade, although whatever the user entered is shown.

This is the view

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>

This is the 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);               

            }
        }); 
    }
    });

This is the model :

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