Заполнять SELECT с помощью значений OPTGROUP и OPTION с использованием AJAX

59
7

У меня есть простой бит PHP/Ajax/jQuery, работающий таким образом, что содержимое второго SELECT изменяется, когда я выбираю значение в первом SELECT.

HTML

<select class='form-control' id='cat_parent' name='cat_parent'>
<option value=''>Select Parent</option>
<option value='1'>Oracle</option>
<option value='6'>SQL</option>
</select>

<select class='form-control' id='cat_id' name='cat_id'>
</select>

JQuery:

$(document).ready(function() {
$('#cat_parent').change(function() {
var currentValue = $(this).val();
// Populate Categories once select Parent
$.get("../ajax/ajax-cats-from-parent.php", {'cat_parent': currentValue}, function(data) {
var cat_id = $.parseJSON(data);
$('#cat_id').empty();
for (var i = 0; i < cat_id.length; i++) {
var regionOption = '<option value="'+cat_id[i]['id']+'">';
regionOption += cat_id[i]['label'];
regionOption += '</option>';
$('#cat_id').append(regionOption);
}
});

});
});

PHP (ajax-cats-from-parent.php)

 $sql = "SELECT cats.fld_label
, cats.fld_id
FROM tbl_b_cats cats
WHERE cats.fld_parent = ?
ORDER BY cats.fld_label";

$stmt = $conn->stmt_init();

if (!$stmt->prepare($sql)) {
throw new Exception("Error preparing statement: $stmt->error, SQL query: $sql");
}

if (!$stmt->bind_param('s', $_GET['cat_parent'])) {
throw new Exception("Error binding parameter: $stmt->error");
}

$stmt->execute();
$stmt->store_result();

if ($stmt->num_rows == 0) {
header('HTTP/1.0 404 Not Found');
exit;
} else {

$AjaxCatsFromParent = array();

$stmt->bind_result($fld_label, $fld_id);

while ($stmt->fetch()) {
$AjaxCatsFromParent []= [
'id' => $fld_id,
'label' => $fld_label
];
}

echo json_encode($AjaxCatsFromParent);

}
$stmt->free_result();
$stmt->close();

$conn -> close();

Все работает отлично.

Я пытаюсь заполнить еще один SELECT, также основанный на выборе значения в первом меню SELECT (ID cat_parent).

Это так, что для нового сообщения я могу назначить родительский пост.

Проблема, с которой я столкнулась, заключается в том, что SELECT имеет метку OPTGROUP для каждой категории, а затем в OPTGROUP для этой категории перечислены сообщения.

SQL для получения сообщений:

$query = "SELECT fld_id fld_id2
, fld_title fld_title2
FROM tbl_c_posts
WHERE fld_catid = ?
ORDER BY fld_title";

Где? это идентификатор категории, которой назначены должности.

Я бы хотел, чтобы SELECT выглядел так:

<select class='form-control' id='parent_cat_id' name='parent_cat_id'>
<option value=''>Select Parent Post</option>
<optgroup label='Accounts Payable'>
<option value='88'>a</option>
<option value='1'>AP - Invoices</option>
<option value='79'>AP - Supplier Reports</option>
</optgroup>
<optgroup label='Accounts Receivable'>
<option value='2'>AR - Customers</option>
<option value='3'>AR - Interface Lines</option>
<option value='4'>AR - Transactions</option>
</optgroup>
<optgroup label='BLOB'>
<option value='87'>s</option>
<option value='86'>sadsadsad</option>
</optgroup>
</select>

Поэтому проблема заключается в том, что PHP должен выводить:

Цикл для категорий (для вывода меток OPTGROUP) Для каждой категории - цикл сообщений, назначенных этой категории (для вывода значений OPTION)

Однако, как мне известно, PHP-код может выводить только один массив?

Я добрался так далеко:

// SQL FOR THE OPTGROUP LABELS ############################################

$sql = "SELECT cats.fld_label
, cats.fld_id
FROM tbl_b_cats cats
WHERE cats.fld_parent = ?
ORDER BY cats.fld_label";

$stmt = $conn->stmt_init();

if (!$stmt->prepare($sql)) {
throw new Exception("Error preparing statement: $stmt->error, SQL query: $sql");
}

if (!$stmt->bind_param('s', $_GET['cat_parent'])) {
throw new Exception("Error binding parameter: $stmt->error");
}

$stmt->execute();
$stmt->store_result();

if ($stmt->num_rows == 0) {
header('HTTP/1.0 404 Not Found');
exit;
} else {

// array for OPTGROUPS
$AjaxOptGpLabel = array();

$stmt->bind_result($fld_label, $fld_id);

while ($stmt->fetch()) {
$AjaxOptGpLabel []= [
'label' => $fld_label
];

// sub-select for the posts assigned to the category
$query = "SELECT fld_id fld_id2
, fld_title fld_title2
FROM tbl_c_posts
WHERE fld_catid = ?
ORDER BY fld_title";

$stmt2 = $conn->stmt_init();

if (!$stmt2->prepare($query)) {
throw new Exception("Error preparing statement: $stmt2->error, SQL query: $query");
}

if (!$stmt2->bind_param('s', $fld_id)) {
throw new Exception("Error binding parameter: $stmt2->error");
}

$stmt2->execute();
$stmt2->store_result();

if ($stmt2->num_rows > 0){

// array for the posts
$AjaxOptGpPosts = array();

/* get results */
$stmt2->bind_result($fld_id2, $fld_title2);

while ($stmt2->fetch()) {

$AjaxOptGpPosts []= [
'id' => $fld_id2,
'label' => $fld_title2
];

}

}

/* tidy up */
$stmt2->free_result();
$stmt2->close();

}

echo json_encode($AjaxOptGpLabel);

}
/* free and close */
$stmt->free_result();
$stmt->close();

$conn -> close();

Таким образом, этот вид работ работает так же, как PHP генерирует массив AjaxOptGpPosts, содержащий сообщения для каждой категории, но затем?

Как я могу получить это на выходе PHP, поскольку в настоящее время он возвращает массив для OPTGROUPS через:

echo json_encode ($ AjaxOptGpLabel);

Как бы я пересмотрел jQuery, чтобы иметь петлю в цикле для заполнения элементов OPTGROUPS и OPTION?

Благодарю!

спросил(а) 2016-03-16T11:41:00+03:00 4 года, 8 месяцев назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема