選擇輸入字段選項被添加到選擇字段之外

Question

我正在構建一個動態下拉字段，該字段在 3 個月內填充了所有“星期六”。 下拉列表已正確填充，但我在關閉</select>輸入后添加了重復的“選項”。 我不知道是什么原因造成的。 當我console.log(formatted); 這些值僅在 Chrome 控制台中出現一次。

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
        } 
    };
}
});

Answer 1

由於您使用的是聯系表 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;
    }
}

這是經過測試和工作的。