Kanniyappan Ramasamy Kanniyappan Ramasamy - 2 months ago 6
Ajax Question

how to append the value in option element

I have one form field called country and one more field state. Suppose i select India. That means I want show only which cities in INDIA. Suppose i select USA means i want show only which cities in USA,from this i wrote select query this and all correct, but i can't append the value in state field..

console.log(res);


Here I have the correct value, but I can't append this value in state field

<script type="text/javascript">
function getState(country_id){
//console.log(country_id);
$.ajax({
url:'getstate.php',
type:'POST',
data : { 'country_id' : country_id},
success:function(data){
var res=jQuery.parseJSON(data);// convert the json
console.log(res);
if(res['status']==1){

var htmlString='';
$.each( res['data'], function( key, value ) {
htmlString+='<select>';
htmlString+='<option>'+value.state_name+'</option>';

htmlString+='</select>';
//console.log( key + ": " + value.name );
});
$('#state').empty().append(htmlString);

}

},
});
};
</script>
getstate.php

<?php
include('dbconfig.php');
$country_id = $_POST['country_id'];
$sql = mysql_query("SELECT * FROM state WHERE country_id='$country_id'");
$count = mysql_num_rows($sql);
$return=array();
if($count > 0){
while($row=mysql_fetch_assoc($sql)){
$data[]=$row;
}
$return=array('status'=>1,'count'=>$count,'data'=>$data);
}else{
$return=array('status'=>0,'count'=>$count,'data'=>'');
}
echo json_encode($return);
?>


<tr>
<th>COUNTRY</th>
<td>
<select name="country" id="country" onchange="getState(this.value);">
<option value="">Select Country</option>
<?php
include("dbconfig.php");
$sql = mysql_query("SELECT * FROM country");
while($row=mysql_fetch_assoc($sql)){
?>
<option value="<?php echo $row['country_id'];?>"><?php echo $row['country_name'];?></option>
<?php } ?>
</select>
&nbsp;&nbsp;<span id="country_err"></span>
</td>
</tr>

<tr>
<th>STATE</th>
<td>
<select name="state" id="state">
<option value="">Select State</option>
</select>
&nbsp;&nbsp;<span id="state_err"></span>
</td>
</tr>

Answer

When you empty $('#state').empty() it empty all options inside $('#state') dropdown not state element completely. So, you no need to add the htmlString+='<select>'; and htmlString+='</select>'; again.

Try below script,

`

function getState(country_id){
//console.log(country_id);
    $.ajax({
    url:'getstate.php',
    type:'POST',
    data : { 'country_id' : country_id},
    success:function(data){
        var res=jQuery.parseJSON(data);// convert the json
        console.log(res);
        if(res['status']==1){

           var htmlString='<option value="">Select State</option>';
           $.each( res['data'], function( key, value ) {
               //htmlString+='<select>'; //  COMMENT THIS AND THIS IS WRONG
               htmlString+='<option>'+value.state_name+'</option>'; // You missed to add "value" attribute. Please add if required 

               //htmlString+='</select>'; //  COMMENT THIS AND THIS IS WRONG
              //console.log( key + ": " + value.name );
            });
            $('#state').empty().append(htmlString);

        }
      },
    });
};

`

Note:- You missed to add "value" attribute for the state option. Please add if required