как изменить текстовое значение типа ввода после выбранного выпадающего списка в 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

Чтобы заполнить ввод текста типа некоторыми данными или строкой, вы должны использовать функцию jvalery .val (), а не .html () - Заменить

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

на

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

Answer 2

этот код должен работать.

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

Answer 3

Попробуйте это

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

или

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