如何使用 ACF 关系字段获取动态下拉列表

Question

我的网站列出了课程和课程提供者。我正在使用 ACF 关系将提供者分配给每门课程。 课程和课程提供者都是自定义 post 类型 我有每个课程页面的联系表，我需要从下拉列表中向选定的课程提供者发送查询。我想要做的是有一个动态字段，一旦选择了提供者，将他们的电子邮件（分配为 acf 字段）提取到另一个表单字段中，并将表单提交到该特定电子邮件。我在以下代码中获得了指定提供商的列表及其电子邮件。

               <select name="supplier" id="supplier" class="form-control">
                    <option value="">---</option>
                    <?php
                    $posts = get_field('course_providers');
                    if( $posts ): ?>
                        <?php foreach( $posts as $post): ?>
                            <?php setup_postdata($post); ?>
                            <option value="<?php the_title(); ?>"><?php the_title(); ?></option>
                        <?php endforeach; ?>
                        <?php wp_reset_postdata(); ?>
                    <?php endif; ?>
                </select>

                <select name="supplier_email" id="supplier_email" class="form-control">
                    <option value="">---</option>
                    <?php
                    $posts = get_field('course_providers');
                    if( $posts ): ?>
                        <?php foreach( $posts as $post): ?>
                            <?php setup_postdata($post); ?>
                            <option value="<?php the_field('email_address'); ?>"><?php the_field('email_address'); ?></option>
                        <?php endforeach; ?>
                        <?php wp_reset_postdata(); ?>
                    <?php endif; ?>
                </select>

我希望jQuery可以做到这一点。

谢谢！

Answer 1

为了简化操作，您可以将电子邮件地址作为数据属性添加到每个提供商标题的标签中，如下所示：

<select name="supplier" id="supplier" class="form-control">
                    <option value="">---</option>
                    <?php
                    $posts = get_field('course_providers');
                    if( $posts ): ?>
                        <?php foreach( $posts as $post): ?>
                            <?php setup_postdata($post); ?>
                            <option value="<?php the_title(); ?>" data-email="<?php the_field('email_address'); ?>"><?php the_title(); ?></option>
                        <?php endforeach; ?>
                        <?php wp_reset_postdata(); ?>
                    <?php endif; ?>
                </select>

然后在您的 jQuery 中，您可以执行以下操作：

$(document).ready(function() {
    $('select#supplier').change(function() {
        var emailAddress = $('select#supplier').find(':selected').data('email');
    });
    // Do something with the var emailAddress on form submit here
});

如何使用 ACF 关系字段获取动态下拉列表

How to get a dynamic dropdown with an ACF Relationship field

wordpress

html-select

drop-down-menu

advanced-custom-fields