选择在选择字段之外添加的输入字段选项

Question

我正在构建一个动态下拉字段，填充所有的"saturday "在3个月期间。下拉框正在正确填充，但我在关闭</select>输入后添加了重复的"选项"。我不知道是什么引起的。在下面的Javascript中，当我console.log(formatted);的值只出现在Chrome控制台一次。

Wordpress, Contact Form 7
Dev: Laragon localhost

<select name="dates" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required span6 dates" aria-required="true" aria-invalid="false">
<option value="0">Saturday, June 18</option>
<option value="1">Saturday, June 25</option>
<option value="2">Saturday, July 2</option>
<option value="3">Saturday, July 9</option>
<option value="4">Saturday, July 16</option>
<option value="5">Saturday, July 23</option>
<option value="6">Saturday, July 30</option>
<option value="7">Saturday, August 6</option>
<option value="8">Saturday, August 13</option>
<option value="9">Saturday, August 20</option>
<option value="10">Saturday, August 27</option>
</select>
// HERE'S the issue - Duplicate options added to my page
<option value="0">Saturday, June 18</option>
<option value="1">Saturday, June 25</option>
<option value="2">Saturday, July 2</option>
<option value="3">Saturday, July 9</option>
<option value="4">Saturday, July 16</option>
<option value="5">Saturday, July 23</option>
<option value="6">Saturday, July 30</option>
<option value="7">Saturday, August 6</option>
<option value="8">Saturday, August 13</option>
<option value="9">Saturday, August 20</option>
<option value="10">Saturday, August 27</option>

联系表格7

[select* dates class:span6 class:dates "Sat, Jun 04"]

Javascript

jQuery(document).ready(function($) {
// Date object
var date = new Date();
var year = date.getFullYear();
var this_month = date.getMonth();
var this_day = date.getDate();
var num_months = 3;
// Select input
var select = $('.contact .dates');
select.find('option').remove();
// 3 months of Saturdays
let index = 0;
for (var i = 0; i < num_months; i++) {
var cur_month = this_month + i;
// Loop through each day of the month
for (var j = 0; j <= new Date(year, cur_month, 0).getDate(); j++) {    
var date = new Date(year, cur_month, j);
// Find Saturdays and append option to select input
if (date.getDay() == 6){
let day = "Saturday, ";
let dayNum = date.getDate();
let month = date.toLocaleString('default', { month: 'long' });
// Don't include past Saturdays for the current month
if (dayNum<this_day && date.getMonth()==this_month){
continue;
}
let formatted = day + month + " "+ dayNum;
//let value = date.toString('dddd, MMMM ,yyyy');
select.append($('<option></option>').attr('value', index).text(formatted));
index += 1;
console.log(formatted); // This only outputs once NOT twice
} 
};
}
});

Answer 1

因为您使用的是Contact Form 7。在我看来，这将更容易与PHP和CF7过滤器wpcf7_form_tag_data_option，这几乎是专为这种事情。CF7开发人员正是使用这个过滤器创建了listto。

这样做而不是使用JS，确保表单将在页面加载之前呈现正确的下拉数据。

表单标签看起来像这样:

[select* dates class:span6 class:dates data:saturdays]

所以这个函数是非常直接的，应该添加到你的主题/子主题的functions.php中，或者如果需要的话作为另一个插件实现。

add_filter( 'wpcf7_form_tag_data_option', 'he_find_every_saturday', 10, 3 );
/**
* Find Every Saturday in the next 3 months and return to CF7 Via DATA option.
*
* @param null  $data nothing if nothing is returned.
* @param array $options the data option (in an array).
* @param array $args if any additional args.
* @return array|void
*/
function he_find_every_saturday( $data, $options, $args ) {
if ( 'saturdays' === $options[0] ) {
$start      = new DateTime();
$end        = new DateTime();
$end        = $end->add( new DateInterval( 'P3M' ) );
$sat_period = new DatePeriod(
$start,
DateInterval::createFromDateString( 'next saturday' ),
$end
);
$saturdays  = array();
foreach ( $sat_period as $saturday ) {
$saturdays[] = $saturday->format( 'l F, j' );
}
return $saturdays;
}
}

这是测试和工作。