根据 ACF 中继器文本输入选项填充选择字段

Question

我在这方面有点挣扎，需要一些帮助。我有一个名为“gas_grades”的 ACF 中继器，在该中继器中我有两个字段：

第一个字段是“等级”，是一个文本字段。 第二个字段是“大小”，是一个带有文本字段的重复字段。

因此，我可以在单独的帖子中添加气体等级和尺寸。 5.5、6、6.5、7等

我在这里尝试完成的是循环浏览表单选择字段中的成绩，并根据在下拉列表中选择的成绩将在第二个下拉列表中显示该特定成绩的大小。

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

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

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

@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 将列在第一个选择下拉列表中，然后它们的子重复字段将列在第二个下拉列表中。

Answer 1

您可以使用JQuery 执行此操作。

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

仅为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; ?>

仅为sizes 创建下拉列表，但使用data attr。添加一个 在称为 `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 更改事件上的等级选择来过滤尺寸下拉列表。

<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>