我正在構建一個動態下拉欄位，該欄位在 3 個月內填充了所有“星期六”。下拉串列已正確填充，但我在關閉</select>輸入后添加了重復的“選項”。我不知道是什么原因造成的。console.log(formatted);當我的值僅在 Chrome 控制臺中出現一次時，在 Javascript 下面。
Wordpress，聯系表 7
開發人員：Laragon 本地主機
<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
}
};
}
});
uj5u.com熱心網友回復：
由于您使用的是聯系表格 7。在我看來，使用 PHP 和 CF7 過濾器會更容易，wpcf7_form_tag_data_option它幾乎是為這種事情設計的。CF7 開發人員正是使用此過濾器創建了 listo。
這樣做而不是使用 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;
}
}
這是經過測驗和作業的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493650.html
標籤：javascript jQuery WordPress 联系表格 7