如何在選項元素中附加值

Question

我有一個稱為國家的表格字段，還有一個名為州的字段。 假設我選擇印度。 這意味着我只想顯示印度的哪些城市。 假設我選擇USA意味着我只想顯示美國的哪個城市，據此我編寫了select查詢，並且都正確，但是我不能在狀態字段中附加值console.log(res);

這里我有正確的值，但是我不能將此值附加在狀態字段中

<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 1

您在附加ajax響應的動態內容方面有一些錯誤。

在下面的代碼中，您將列表（選擇）添加到自身，這是錯誤的，並且您生成的選項沒有值，只有標簽，如此處所示：

$.each( res['data'], function( key, value ) {
               htmlString+='<select>'; // WRONG since your target Element is the Select element
               htmlString+='<option>'+value.state_name+'</option>';

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

現在您可以像這樣重寫它：

    $.each( res['data'], function( key, value ) {                   
        htmlString += '<option value="'+value.state_id+'">';
        htmlString += value.state_name;
        htmlString += '</option>';
   });
   $('#state').empty().append(htmlString);

Answer 2

當您清空$('#state').empty()它會完全清空$('#state')下拉列表中的所有選項，而不會完全聲明狀態元素。 因此，您無需添加htmlString+='<select>'; 和htmlString+='</select>'; 再次。

試試下面的腳本，

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);

        }
      },
    });
};

注意：-您錯過了為狀態選項添加“值”屬性的步驟。 請根據需要添加