Jquery для заполнения <table>на основе <select>

Question

Итак, у меня есть форма с раскрывающимся списком вверху, которая заполняется значениями из таблицы 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, и все игроки этой команды отображаются в списке под формой, чтобы человек, заполняющий форму, мог видеть кто уже в команде, которую они выбрали.

Answer 1

Что вам нужно сделать, это:

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/

Answer 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 выполнит запрос ajax к php-скрипту на стороне сервера (в коде это path/to/server/script.php). Этот скрипт запросит вашу базу данных и просто выведет таблицу так, как вы хотите.Выбранная команда будет в переменной $_GET 'tid'.