Javascript 基于ACF中继器文本输入选择填充选择字段

我在这方面有点困难，需要一些帮助。我有一个名为“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

@if（有行（'gas'u grades'））
@而（有两行（“气体等级”）
{{$grade}
@如果（有行（'size'））
@while（有_行（'size'））
{{$size}}
@结束时
@恩迪夫
@结束时
@恩迪夫

当然，这是电流输出：

---

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

您可以使用

JQuery

完成此操作

首先，必须创建两个单独的下拉列表

仅为

等级创建下拉列表

现在您需要根据

grade

change event上的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>

5.5
6.
6.5
44L/尺寸200:55磅
265铝：60/40磅
150磅：28磅
45升/尺寸200:55磅
270铝：60/40磅
200磅：28磅
50升/尺寸200:55磅
300铝：60/40磅
200磅：28磅

所以您想将其作为一个下拉列表？不，两个下拉列表。第一个下拉菜单将显示第一个转发器的文本字段，第二个下拉菜单将显示第二个转发器（子/子转发器）的文本字段。好的，我将返回给你。这太神奇了，它可以工作！我接受了这个答案。谢谢欢迎很高兴能帮上忙。Bhautik，我通过你的联系方式给你发了一条信息。你能回复我吗？谢谢是的，我回答了你。

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

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