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

时间:2017-08-20 08:15:05

标签: wordpress drop-down-menu html-select advanced-custom-fields

我的网站列出了课程和课程提供者。我正在使用ACF关系为每个课程分配提供者。 课程和课程提供者都是自定义帖子类型我有一个单独课程页面的联系表格,我需要从下拉列表中将查询发送给选定的课程提供者。我要做的是拥有一个动态字段,一旦选择了提供程序,就可以将其电子邮件(指定为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完成。

谢谢!

1 个答案:

答案 0 :(得分:0)

为了方便起见,您可以将电子邮件地址作为数据属性添加到每个提供商标题的标记中,如下所示:

<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
});