JQuery и Auto-populat выбирает

Question

У меня есть простая страница, где я могу выбрать клиента, а затем я выбрал это автозаполнение для проектов, которые принадлежат клиенту. Я использую PHP / MySQL, чтобы получить результаты.

Я взглянул на это: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/, но я думаю, что это начинается с обоих полей на странице. Я пытался переработать код, но не очень хорошо.

 var client_id = $('#c_id').val();
    $.getJSON("../inc/get-projects.php", {id: client_id}, function(data){
        projects = $('#p_id');
        projects.empty();
        $.each(data, function() {
            var option = $('<option/>').attr('value', this.id).text(this.name);
            projects.append(option);
        });
    });

PHP:

<?php
    include "config.inc.php";
    $sth = mysql_query(
        sprintf(
        "SELECT c_id,p_id,p_title FROM projects WHERE c_id = %s",
        mysql_real_escape_string($_GET['id'])
        )
    );
    $projects = array();
    while($r = mysql_fetch_assoc($sth)) {
        $projects[] = array('id' => $r['p_id'], 'name' => $r['p_title']);
    }
    print json_encode($projects);
    exit;


?>

Answer 1

Если у вас есть HTML, как это:

<select id='clients'>...</select>
<select id='projects'>...</select>

У вас может быть такой код jQuery:

$(document).ready(function() {
    var $clients = $('#clients');
    $clients.change(function() {
        var client_id = $clients.val();
        $.getJSON("getProjects.php", {id: client_id}, function(projects) {
            $projects = $('#projects');
            $projects.empty();
            $.each(projects, function() {
                var option = $('<option/>').attr('value', this.id).text(this.name);
                $projects.append(option);
            });
        });
    });
});

А затем getProjects.php возвращает что-то вроде:

$sth = mysql_query(
    sprintf(
    "SELECT * FROM projects WHERE client_id = %s",
    mysql_real_escape_string($_GET['id'])
    )
);
$projects = array();
while($r = mysql_fetch_assoc($sth)) {
    $projects[] = array('id' => $r['id'], 'name' => $r['name']);
}
print json_encode($projects);
exit;

Я не проверял все это, но это более или менее то, что вы хотите, я думаю.

edit - Протестировано и работает, очевидно, это может быть не совсем то, что вам нужно, но дает представление о том, как это сделать Надеюсь, это поможет.

edit 2 - Проблема с вашим кодом здесь:

$.getJSON("../inc/get-projects.php", {id: client_id}, function(projects){
    projects = $('#p_id');
    projects.empty();
    $.each(projects, function() {
        var option = $('<option/>').attr('value', this.id).text(this.name);
        projects.append(option);
    });
});

Вы перезаписываете projects, переданное в функцию, с помощью projects во 2-й строке. Я использовал $ в своем коде, чтобы различать два, что, по общему признанию, возможно, не лучший из способов. Чтобы исправить, измените код на это:

$.getJSON("../inc/get-projects.php", {id: client_id}, function(data){
    projects = $('#p_id');
    projects.empty();
    $.each(data, function() {
        var option = $('<option/>').attr('value', this.id).text(this.name);
        projects.append(option);
    });
});

Answer 2

Ответы на этот вопрос могут оказаться полезными: Использование javascript и jquery для заполнения связанных полей выбора структурой массива