如何在选项元素中附加值

Question

我有一个名为 country 的表单域和一个名为 state 的域。假设我选择印度。这意味着我只想显示印度的哪些城市。假设我选择美国意味着我只想显示美国的哪些城市，从这里我写了选择查询这个和所有正确的，但我不能在状态字段中附加值..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);

        }
      },
    });
};

注意：- 您错过了为 state 选项添加“value”属性。需要的请补充