如何在option元素中附加值

时间:2016-09-21 16:20:17

标签: javascript php jquery ajax

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

2 个答案:

答案 0 :(得分:0)

您在如何附加ajax-response的动态内容方面存在一些错误。

在您的下面的代码中,您将列表(选择)添加到自身,这是错误的,您生成的选项没有值,只有标签,如下所示:

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

现在你可以像这样重写它:

for (int generator = Generation.nextInt(5) + 3; generator > 0; generator--) {
        int randomedNumber = 0;
        do {
          randomedNumber = Generation.nextInt(10);
        } while(interact.contains(randomedNumber))
        interact.add(randomedNumber);
};

答案 1 :(得分:-1)

当您清空ualarm时,它会清空$('#state').empty()下拉列表中的所有选项,而不是完全填充状态元素。因此,您无需再次添加$('#state')htmlString+='<select>';

尝试以下脚本,

htmlString+='</select>';

注意: - 您错过了为州选项添加“value”属性。如果需要,请添加