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
当然,这是当前的输出:
因此,5.5、6 和 6.5 将列在第一个选择下拉列表中,然后它们的子中继器字段将列在第二个下拉列表中。
解决方案
您可以使用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>
推荐阅读
- javascript - 单击时将内联 css 应用于打字稿中的标记
- excel - Excel 表格,具有交叉工作表引用,排序完整性
- javascript - 如何传递 MVC 模型属性列表
使用 Javascript Ajax 从我的视图到控制器? - python - 在公共模式而不是非公共模式中创建的 django auth 表
- powershell - 对 Win32_PowerPlan 的 Powershell 调用显示无效类错误
- node.js - 客户端未收到来自服务器的 json 响应
- vhdl - 如何在 VHDL 的进位超前加法器代码中使用级别?
- flutter - 按下前导时显示列表菜单
- reactjs - 在用户之间切换时的持久购物车反应
- python - 使用 SARIMA 进行时间序列预测