如何在ajax中选择下拉列表后更改输入类型的文本值

Question

从下拉列表中选择数据后，我尝试使用数据库中的数据更改输入类型文本中的值

但数据未输入文本输入值

<?php
//Include the database configuration file
include 'dbConfig.php';

//Fetch all the country data
$query = $db->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC");

//Count total number of rows
$rowCount = $query->num_rows;
?>
<select id="country">
    <option value="">Select Country</option>
    <?php
    if($rowCount > 0){
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
        }
    }else{
        echo '<option value="">Country not available</option>';
    }
    ?>
</select>

<div id="state">

</div>


<?php
//Include the database configuration file
include 'dbConfig.php';

if(!empty($_POST["country_id"])){
    //Fetch all state data
    $query = $db->query("SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name LIMIT 1");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //State option list
    if($rowCount > 0){
        $row = $query->row();
        echo '<input type="text" id="state" value="'.$row['state_name'].'">';
    }
}
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#country').on('change',function(){
        var countryID = $(this).val();
        if(countryID){
            $.ajax({
                type:'POST',
                url:'index.php',
                data:'country_id='+countryID,
                success:function(html){
                    $('#state').html(html);
                }
            }); 
        }
    });

});
</script>

我希望根据数据库中的数据进行输出

这是我的数据库：

数据库国家/地区

数据库状态

错误

Answer 1

尝试

 $('#state').val(html);

或

 $('#state').text(html);

Answer 2

要用一些数据或字符串填充文本类型的输入，必须使用.val（）jquery函数，而不是.html（）-替换

$('#state').html(html);

使用

$('#state').val(html);

Answer 3

下面的代码应该可以使用。

$('#state').html(html);