使用AJAX JSON基于另一个下拉列表填充下拉列表

时间:2014-06-26 07:48:46

标签: jquery ajax json

我知道很多人之前已经问过这个问题,但是我无法得到类似于我的问题的确切解决方案。

我有一个名为Category的下拉列表和另一个名为Grade的子下拉列表。 当我选择一个类别(让我说我从收音机,洗衣机,DVD播放机等中选择电视),然后该类别的相应等级(让我们说电视 - 索尼,日立,三星,飞利浦..)应该填写等级下降。但是,从数据库中获取类别和等级,并且查询工作正常。

AJAX: -

<script>
        function getGradeDetails(category){
            if(category!==""){
                var request = $.ajax({
                    url: "../controller/sales.php",
                    type: "POST",
                    data: {category:category,action:'get_grade_details'},  
                    dataType: "json"
                });
                request.done(function(json_return){    
                    //alert(json_return['grade_desc']);
                    $( "#grade" ).append( "<option>"+json_return['grade_desc']    </option>" );
                }); 
                request.fail(function(jqXHR, textStatus) {
                    alert( "Request failed: " + textStatus );
                    return false;
                });
            }
            else{
                $("#grade").append('<option></option>');
            }
        }
</script>

HTML: -

<td>Category
    <select name="category" id="category" onchange="getGradeDetails(this.value)">
        <option></option>
        <?php 
           require_once '../model/sales.php';
           @$result=Sales::getAllCategories();
           while($value=  mysql_fetch_assoc($result)){
        ?>
        <option value="<?php echo $value['category_code']; ?>">
            <?php echo $value['category_desc'] ?>
        </option>
        <?php } ?>
    </select>
</td>

<td>Grade
<td>
   <select id="grade">
   </select>
</td>

控制器: -

<?php 
    require_once '../model/sales.php';
    $action=$_REQUEST['action'];

    switch($action){
        case 'get_grade_details':
            getGradeDetails();
            break;
        default :
            break;
    }        
    function getGradeDetails(){
        $category=$_POST['category'];
        require_once '../model/sales.php';
        $obj=new Sales();
        $result=mysql_fetch_assoc($obj->getGradesForCategory($category));
        echo json_encode($result);
        exit;
    }
?>

根据此代码,等级上的下拉值仅获得数据库中的第一个值。例如: - 只有索尼,它避免了其他人 - 日立,三星等。 而且当我改变另一个类别(例如: - 洗衣机)时,等级下拉列表的值为索尼(电视等级),LG(洗衣机等级)。

我想要的是: -

1)这些值应该整体显示为DB中的第一个/单个值。

2)当我改变类别(电视到洗衣机)时,不应出现与电视有关的值(索尼),只有与洗衣机(LG)有关的值应该出现。

1 个答案:

答案 0 :(得分:0)

问题是您没有循环并将响应列表中的所有项目添加到选择标记的选项

request.done(function(json_return){    
                //alert(json_return['grade_desc']);
                **$( "#grade" ).append( "<option>"+json_return['grade_desc']</option>"**     );
            });

应该更正突出显示的部分,以便将所有值添加为选项,例如

var options = '';

for (i=0;i< json_return['grade_desc'].length;i++){
   options += "<option>"+json_return['grade_desc'][i]+"</option>";
}
$("#grade").append(options);

第二个问题需要更多信息。请发布ajax的回复片段。