基于<select> </select> <table> </table>填充的Jquery

时间:2011-04-18 14:15:13

标签: php jquery mysql select dynamic

所以我在顶部有一个下拉表单,其中填充了mysql表中的值。基本上这种形式是允许球员加入球队。

    $seasonid = $_SESSION['SEASON_ID'];
$sql="SELECT TEAM_ID, TEAM_NAME FROM TEAMS WHERE SEASON_ID=$seasonid";
$result=mysql_query($sql);
$options="";
while ($row=mysql_fetch_array($result)) {
        $tid=$row["TEAM_ID"];
        $tname=$row["TEAM_NAME"];
    $options.="<OPTION VALUE=\"$tid\">".$tname;
}

我想要做的是当从列表中选择一个团队时,使用TEAM_ID查询数据库,并且该团队中的所有玩家都显示在表单下方的列表中,以便填写表单的人可以看到谁已经加入了他们所选择的团队。

2 个答案:

答案 0 :(得分:2)

<强> HTML

<select id = 'teamSelect'>....options....</select>
<div id = 'tableContainer'></div>

<强>的Javascript

$(function() {
    $("#teamSelect").bind("change", function() {
        $.ajax({
            type: "GET", 
            url: "path/to/server/script.php",
            data: "tid="+$("#teamSelect").val(),
            success: function(html) {
                $("#tableContainer").html(html);
            }
        });
    });

});

javascript代码将对服务器端php脚本执行ajax请求(在代码中为path/to/server/script.php)此脚本将查询您的数据库并根据需要输出表。所选的团队将位于$_GET变量'tid'。

答案 1 :(得分:2)

您需要做的是:

1) attach a change handler to the dropdown using jQuery (http://api.jquery.com/change/)

2) use $.get() (http://api.jquery.com/jQuery.get/) to make an async call to the server to query the database

3) return the data (either as html directly or as a JSON See http://api.jquery.com/jQuery.getJSON/)

4) in your $.get(), success handler either :
      push the resultant html into a container element on the form (see http://api.jquery.com/html/), eg a <div> <ul> or <table> depending on what you returned from the server

or    parse the JSON and generate the html before rendering it into the form.

如果你觉得勇敢,你可以使用tmpl插件来格式化html。 http://api.jquery.com/jquery.tmpl/