Javascript 使用AJAX使用OPTGROUP和OPTION值填充SELECT

我使用了一点简单的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>

一切正常

我正在尝试填充另一个选择，这也是基于在第一个选择菜单（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";

火车在哪里？职位分配到的类别的ID

我希望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生成一个“AjaxOptGpPosts”数组（包含每个类别的帖子）的过程中起作用，但接下来呢

如何将其输入到PHP的输出中，因为它当前仅通过以下方式返回OPTGROUPS的数组：

echo json_编码（$AjaxOptGpLabel）

如何修改jQuery，使其在循环中有一个循环来填充OPTGROUPS和OPTION元素

---

谢谢

返回的数据格式是什么，请共享

data

值的示例，这是问题的一部分。我不知道如何更改PHP以将数据转换为一种格式，其中包含所有的OPTGROUP标题，所有的post ID和标题都嵌套在下面。这是返回的数据格式，例如，可以用于OPTGROUP标题的类别：[{“label”：“AP”}，{“label”：“AR”}，{“label”：“EAM”}，{“label”}，{“GL”}，{“label”：“HR”}，{“label”：“INV”}，{“label”：“Other”}，{“label”：“PA”}，{“label”：“PO”}，{“label”：“SysAdmin”}]但显然它需要下面的post数据？返回的数据格式是什么，请共享

数据的值示例，这是问题的一部分。我不知道如何更改PHP以将数据转换为一种格式，其中包含所有的OPTGROUP标题，所有的post ID和标题都嵌套在下面。这是返回的数据格式，例如，可以用于OPTGROUP标题的类别：[{“label”：“AP”}，{“label”：“AR”}，{“label”：“EAM”}，{“label”}，{“GL”}，{“label”：“HR”}，{“label”：“INV”}，{“label”：“Other”}，{“label”：“PA”}，{“label”：“PO”}，{“label”：“SysAdmin”}]但显然它需要下面的post数据？
$query = "SELECT fld_id fld_id2
               , fld_title fld_title2 
            FROM tbl_c_posts 
           WHERE fld_catid = ? 
        ORDER BY fld_title";

<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>

// 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();