根据 ACF Repeater 文本输入选择填充 Select 字段

Question

我正在为此苦苦挣扎，需要一些帮助。我有一个名为“gas_grades”的 ACF 转发器，在该转发器中我有两个字段：

第一个字段是“成绩”，是一个文本字段。第二个字段是“大小”，是一个带有文本字段的转发器字段。

所以，对于个人 post 我可以添加气体等级和尺寸。 5.5、6、6.5、7 等

我在这里试图完成的是循环遍历表格 select 字段中的成绩，并根据成绩 select 在下拉列表中编辑将显示该特定成绩的尺码在第二个下拉菜单中。

下图展示了我的字段组的当前布局。

中继器（气体等级）文本字段（等级）中继器（尺寸）文本字段（大小）末端中继器（等级）末端中继器（气体等级）

这是用于显示数据的基本转发器循环：

@if( have_rows('gas_grades') )
    @while( have_rows('gas_grades') )
        
            <?php
            the_row();
            $grade = get_sub_field('grade');
            ?>
            <option value="">{{ $grade }}</option>
            
            @if( have_rows('size') )
                @while( have_rows('size') )
                    <?php
                    the_row();
                    $size = get_sub_field('size');
                    ?>
                        <option value="">{{ $size }}</option>
                @endwhile
            @endif
        
    @endwhile
@endif

当然，这是当前输出：

因此，5.5、6 和 6.5 将列在第一个 select 下拉列表中，然后它们的子中继器字段将列在第二个下拉列表中。

Answer 1

您可以使用 JQuery 来做到这一点。

首先，您必须创建两个单独的下拉菜单。

Create a dropdown for only grades.

if( have_rows('grades') ): ?>
    <select id="grades">
        <?php while( have_rows('grades') ) : the_row(); $grade = get_sub_field('grade'); ?>
            <option value="<?php echo $grade; ?>"><?php echo $grade; ?></option>
        <?php endwhile; ?>
    </select>
<?php else : endif; ?>

Create dropdown for only sizes but with using data attr. add a grade in data attr called `data-group.

<?php if( have_rows('grades') ): ?>
    <select id="sizes">
        <?php while( have_rows('grades') ) : the_row();
            $grade = get_sub_field('grade');
            if( have_rows('sizes') ): while( have_rows('sizes') ) : the_row();
                $size = get_sub_field('size'); ?>
                    <option data-group="<?php echo $grade; ?>" value="<?php echo $size; ?>"><?php echo $size; ?></option>
            <?php endwhile; ?>
            <?php else : endif; 
        endwhile; ?>
    </select>
<?php else : endif; ?>

现在您需要在 grade 更改事件中根据等级 select 过滤尺码下拉列表。

<script type="text/javascript">
    (function($){
        $('#grades').on('change', function(){
            var grade = $(this).val();
            var size  = $('#sizes');
            var i     = 1;
            $('option', size).filter(function(){
                if ( $(this).attr('data-group') === grade ) {
                    $(this).show();
                    if( i == 1 ){
                        $("#sizes").val($(this).val());
                    }
                    i++;
                } else {
                    $(this).hide();
                }
            });
        });
        $('#grades').trigger('change');
    })(jQuery);
</script>

$('#grades').on('change', function(){
    var grade = $(this).val();
    var size  = $('#sizes');
    var i     = 1;
    $('option', size).filter(function(){
        if ( $(this).attr('data-group') === grade ) {
            $(this).show();
            if( i == 1 ){
              $("#sizes").val($(this).val());
            }
            i++;
        } else {
            $(this).hide();
        }
    });
});
$('#grades').trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="grades">
    <option value="5.5">5.5</option>
    <option value="6">6</option>
    <option value="6.5">6.5</option>
</select>
<select id="sizes">
    <option data-group="5.5" value="44L/ Size 200 : 55 lbs">44L/ Size 200 : 55 lbs</option>
    <option data-group="5.5" value="265 AL : 60/40 lbs">265 AL : 60/40 lbs</option>
    <option data-group="5.5" value="150 AL : 28 lbs ">150 AL : 28 lbs </option>
    <option data-group="6" value="45L/ Size 200 : 55 lbs">45L/ Size 200 : 55 lbs</option>
    <option data-group="6" value="270 AL : 60/40 lbs">270 AL : 60/40 lbs</option>
    <option data-group="6" value="200 AL : 28 lbs ">200 AL : 28 lbs </option>
    <option data-group="6.5" value="50L/ Size 200 : 55 lbs">50L/ Size 200 : 55 lbs</option>
    <option data-group="6.5" value="300 AL : 60/40 lbs">300 AL : 60/40 lbs</option>
    <option data-group="6.5" value="200 AL : 28 lbs ">200 AL : 28 lbs </option>
</select>

根据 ACF Repeater 文本输入选择填充 Select 字段

Populate Select Field based on ACF Repeater Text Input Choice

javascript

php

wordpress

advanced-custom-fields

acfpro