在与php分开的div中填充下拉菜单

时间:2014-09-27 12:22:18

标签: javascript php jquery drop-down-menu pagination

在单独的div中填充php中的下拉菜单

我有一个函数search(),它使用ajax并将许多值/变量传递给php,如color,itemtype等,作为'ajax_data'。

    $.ajax({
        url: 'phpmysql.php',
        data: ajax_data,
        success: function (data) {
            $('#searchresults').html(data);
        }
    }).error(function() {
        alert ('An error occurred');
    });

然后将搜索结果动态填充到#searchresults。

我有一个下拉菜单(#pagemenu),我想动态显示当前搜索的页码,例如,如果在下拉列表中有10页的结果显示选项,从1到10。

我已经计算出php中的“每页结果数”和“总页数”,并将它们设置为$ per_page和$ totalpages。

//forloop listing number of pages in dropdown
    for ($x=1; $x<=$totalpages; $x++) {
    echo "<option value=".$x.">".$x."</option>";
    }

所以搜索结果会加载到#searchresults中,但是如何将上面的for循环加载到单独的div中的#pagemenu下拉列表中呢?我目前可以想到的唯一方法就是在主页面中为dropdown和forloop编写php,然后使用会话变量链接到php文件,但不确定这是不是一个好主意。任何建议表示赞赏!感谢

1 个答案:

答案 0 :(得分:0)

坚持你的具体问题,包括在服务器中创建下拉菜单并在AJAX响应中返回它,你似乎需要在所述响应中返回两件事:数据和分页选项。

你可以做的一件事是返回一个包含两个东西的Json对象,所以你可以这样做:

success: function (data) {
    $('#searchresults').html(data.result);
    $('#pagemnu').html(data.options);
}

从客户端实现此目的的一种方法是将dataType添加到json,以便将data解析为对象并准备好将其用作:

$.ajax({

    dataType: 'json',

    url: 'phpmysql.php',
    data: ajax_data,
    success: function (data) {
        $('#searchresults').html(data.result);
        $('#pagemnu').html(data.options);
    }
}).error(function() {
        alert ('An error occurred');
});

在服务器端,您将使用两个结果填充数组并将其返回为JSON:

$result = array();
...
$result['searchResult'] = $theSearchResult;

$optionsHtml = '';
for ($x=1; $x<=$totalpages; $x++) {
    $optionsHtml .= "<option value=".$x.">".$x."</option>";
}
$result['options'] = $optionsHtml;

...

echo json_encode( $result );