Question

我有两个下拉选项，一个用于分类，另一个用于列出页面。

我想让用户首先从第一个选项中选择一个选项（这是其他页面的父页面），然后是第二个下拉列表，在第一个下拉列表中仅显示选择页面的子页面。

我获取子页面的方式是使用get_posts的PHP函数，并传递在第一个下拉列表中选择的父页面的ID。

但我不知道如何运行AJAX调用，以便用所选的第一个值调用该函数，然后更新第二个列表？

FORM

<div id="frontpage-quick-select" class="nav well-bv" role="navigation">
    <div class="container">
        <div class="h2 pull-left">Start your journey</div>
        <form id="bv-quick-select" class="navbar-form navbar-right">
            <div class="form-group">
                <select name="bv-quick-select-category" id="bv-quick-select-category" class="form-control input-lg">
                    <option selected disabled>Choose a body area</option>
                    <?php bv_quick_select_get_category_options(); ?>
                 </select>
            </div>
            <div class="form-group">
                 <select name="bv-quick-select-procedure" id="bv-quick-select-procedure" class="form-control input-lg">
                     <option>Choose a procedure</option>

                 </select>
             </div>
             <button type="submit" class="btn btn-primary btn-lg btn-block-xs">Go</button>
         </form>
     </div>
 </div>

使用的功能

function bv_quick_select_get_category_options() {
    $procedure_pages = get_posts(array(
        'post_type' => 'page',
        'posts_per_page' => -1,
        'meta_query' => array(
            array(
                'key' => '_wp_page_template',
                'value' => 'template-procedure-minimal.php'
            )
        )
    ));
    $procedure_categories = array();
    foreach($procedure_pages as $p1) {
        array_push($procedure_categories, wp_get_post_parent_id($p1->ID));
    }
    sort($procedure_categories);
    $output = '';
    foreach(array_unique($procedure_categories) as $c) {
        $output .= '<option value="'.get_post($c)->post_title.'">'.get_post($c)->post_title.'</option>';
    }
    return $output;
}

function bv_quick_select_get_procedure_options($category = null) {
    $procedures = get_posts(array(
        'post_type'  => 'page',
        'posts_per_page' => -1,
        'post_parent' => get_page_by_title($category)->ID
    ));
    $output = '';
    foreach($procedures as $p) {
        $output .= '<option value="'.get_the_permalink(get_post($p)->ID).'">'.get_post($p)->post_title.'</option>';
    }
    return $output;
}

JS用于AJAX

$(document).on('change', '#bv-quick-select-category', function() {

    item = $(this).val();

    $.ajax({
        url: 'assets/bv-quick-select-ajax.php',
        type: 'POST',
        data: {value: item},
        success: function(response) {
            alert(response);
        }
    });

});

我的主要问题是，我知道我需要使用该函数来完成ajax PHP文件中的第二个下拉列表，但是如何从JS文件中传递第一个ID，然后如何返回内容该函数，返回JS文件并将它们添加到下拉列表中？

如何在select中显示动态选项，基于另一个使用AJAX的select元素？

0 个答案: