动态更改下拉列表值

时间:2021-05-17 作者:Mohamed Amine Landolsi

我有一个表单,在该表单中,我会根据父自定义帖子类型的ID在复选框列表中列出相关的自定义帖子类型,如图所示。

因此,当我选中4个选项的一个选项时,我想在下拉列表中列出我选中的自定义帖子的术语列表。

表单是用elementor pro构建的,但为了有帖子列表和分类术语,我使用代码(我使用我的函数,并将其包含在functions.php上的shortcode中)。

/*
 * Display list of  relationship field
 *
*/

function list_formation_caces(){
echo "<div class=\'golistgo\'>";
$args = array(
    \'post_type\' => \'categories\',
    \'posts_per_page\' => 20,
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
    $formations = get_posts(array(
        \'post_type\' => \'formations\',
        \'post__in\' => array(16061),
        \'meta_query\' => array(
            array(
                \'key\' => \'categories\', // name of custom field
                \'value\' => \'"\' . get_the_ID() . \'"\', // matches exactly "123", not just 123. This prevents a match for "1234"
                \'compare\' => \'LIKE\'
            )
        )
    ));
    if($formations){
        foreach ($formations as $categorie){
            $image = get_field(\'image_form\');
            if($image){
                // Image variables.
                $url = $image[\'url\'];
                $title = $image[\'title\'];
                $alt = $image[\'alt\'];
                $caption = $image[\'caption\'];

                // Thumbnail size attributes.
                $size = \'thumbnail\';
                $thumb = $image[\'sizes\'][ $size ];
                $width = $image[\'sizes\'][ $size . \'-width\' ];
                $height = $image[\'sizes\'][ $size . \'-height\' ];
            }
            echo "<input type=\\"checkbox\\" class=\\"btn-check\\" name=\\"Description\\" value =\\"". get_the_title() .
                "\\" id=\\"". get_the_ID()  ."\\">";
            echo "<label class=\\"options-form\\" for=\'". get_the_ID() ."\'>";
                               echo "<div class=\\"image-cat\\">";
                                    echo get_the_post_thumbnail();
                               echo"</div>";
                               echo "<div class=\\"body-cat\\">";
                                    echo "<div  class=\\"title-formation\\">" ;
                                    echo "</div>";
                                    echo "<div  class=\\"title-cat\\">" ;
                                    echo the_title() . ":" . " <span  class=\\"describe-cat\\">" . get_field(\'type_machine\') . "</span>";
                                    echo "</div>";
                               echo "</div>";
            echo "</label>";
        }
    }
endwhile;
wp_reset_postdata();
echo "</div>";
}

function shortcode_list_categ_caces(){
            return (list_formation_caces()) ;
}
add_shortcode(\'list_formation_caces\', \'shortcode_list_categ_caces\');

function shortcode_total_count_checked(){

return ("<div class=\'count-checkboxes-wrapper\'>" . "<h2 class=\'title-count\'>" . "Vous avez choisis" .
    "<span id=\'count-checked-checkboxes\'> " . "  0" ."</span> catégorie(s)."." </h2>" .
    "</div>");
}
add_shortcode(\'count_checked\', \'shortcode_total_count_checked\');

function list_sessions_caces()
{
    $terms = get_terms( array(
        \'taxonomy\' => \'sessions\',
        \'hide_empty\' => false,
    ) );
    echo\'<label for="form-field-centre" class="elementor-field-label">Où se déroulera la formation ?</label>\';
    echo \'<div class="elementor-field elementor-select-wrapper ">\';
    echo \'<select name="CENTRE"  id="form-field-field_centre" class="elementor-field-textual elementor-size-sm">\';
    echo \'<option value="">Choisir une session de formation </option> \';
    foreach ($terms as $term) {
        echo \'<option value="\' . $term->name . \'">\' . $term->name . \'</option>\';
    }
    echo \'</select>\';
    echo\'</div>\';
}
function shortcode_list_sessions(){
    return (list_sessions_caces()) ;
}
add_shortcode(\'list_sessions_caces\', \'shortcode_list_sessions\');
请帮忙!enter image description here

1 个回复
SO网友:Jos Faber

您可以选择两种方式:

这两个CPT的分类法可能没有太多数据,因此您可以在模板中用php中的javascript呈现这两个数组,然后单击复选框切换下拉数据。您可以使用CPT的id来命名数组,例如。cpt-134 然后单击CPT,将下拉数据设置为名为cpt-[id-of-cpt]. 将这些数据输入javascript的一种方法是,如果您有general.js:

wp_register_script(\'general\', get_template_directory_uri() . \'/js/general.js\');
wp_localize_script(\'general\', \'myVars\', array(
  \'site_url\' => site_url(),
  \'dropdownData\' => get_CPT_Dropdown_Data(),
));
wp_enqueue_script(\'general\');
当然,您必须编写该函数get_CPT_Dropdown_Data() 它根据CPT id返回包含分类数据的数组。

单击CPT,调用一个ajax函数,该函数用于检索该CPT的分类。然后用该数据更新下拉列表

相关推荐

带有wp_Dropdown_Pages的下拉菜单

尝试创建一个下拉菜单,其中项目是给定父页面的子页面。该列表具有自动提交脚本。我想添加一些css规则,但无法这样做。此外,每次我编辑测试代码的页面时,我都会看到下面的警告:无法修改标题信息-标题已由发送(输出开始于/etc)非常感谢这是代码,不是我的:sourcefunction dropdownbox_autosubmit() { wp_dropdown_pages(array(\'child_of\' => 42,\'show_option_none=Select Page\'))