【问题标题】:Hide dropdown options based on date根据日期隐藏下拉选项
【发布时间】:2018-01-08 14:02:40
【问题描述】:

我正在设计一个 woocommerce wordpress 网站,其中出售杂志中的广告空间。我被要求在每个产品上包含一个属性,说明开始日期,但隐藏当前月份和下个月,以阻止人们购买空间并期望它立即开始。

出于示例目的,我已在此fiddle 中提取了 HTML。

select {
  border-color: #F1F1F1;
  border-top-color: #DDD;
  border-left-color: #DDD;
  background-color: #F9F9F9;
  color: #515151;
  font: 12px Tahoma;
  padding: 8px;
  margin-bottom: 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
<table>
  <tbody>
    <tr>
      <td class="label"><label for="advert-size">Advert Size</label></td>
      <td class="value">
        <select id="advert-size" class="" name="attribute_advert-size" data-attribute_name="attribute_advert-size" data-show_option_none="yes">
                <option value="">Choose an option</option>
                <option value="Eighth page" class="attached enabled">Eighth page</option>
                <option value="Quarter page (portrait)" class="attached enabled">Quarter page (portrait)</option>
                <option value="Quarter page (landscape)" class="attached enabled">Quarter page (landscape)</option>
                <option value="Half Page (portrait)" class="attached enabled">Half Page (portrait)</option>
                <option value="Half page (landscape)" class="attached enabled">Half page (landscape)</option>
                <option value="Full page (standard)" class="attached enabled">Full page (standard)</option>
                <option value="Full page (premium)" class="attached enabled">Full page (premium)</option>
                <option value="Front cover banner" class="attached enabled">Front cover banner</option>
            </select>
      </td>
    </tr>
    <tr>
      <td class="label"><label for="advert-period">Advert Period</label></td>
      <td class="value">
        <select id="advert-period" class="" name="attribute_advert-period" data-attribute_name="attribute_advert-period" data-show_option_none="yes">                     <option value="">Choose an option</option>
                <option value="1 month" class="attached enabled">1 month</option>
                <option value="3 months (save 10%)" class="attached enabled">3 months (save 10%)</option>
                <option value="6 months (save 15%)" class="attached enabled">6 months (save 15%)</option>
                <option value="12 months (save 20%)" class="attached enabled">12 months (save 20%)</option></select>
      </td>
    </tr>
    <tr>
      <td class="label"><label for="start-month">Start month</label></td>
      <td class="value">
        <select id="start-month" class="" name="attribute_start-month" data-attribute_name="attribute_start-month" data-show_option_none="yes">
            <option value="">Choose an option</option>
            <option value="Jan" class="attached enabled">Jan</option>
            <option value="Feb" class="attached enabled">Feb</option>
            <option value="Mar" class="attached enabled">Mar</option>
            <option value="Apr" class="attached enabled">Apr</option>
            <option value="May" class="attached enabled">May</option>
            <option value="Jun" class="attached enabled">Jun</option>
            <option value="Jul" class="attached enabled">Jul</option>
            <option value="Aug" class="attached enabled">Aug</option>
            <option value="Sep" class="attached enabled">Sep</option>
            <option value="Oct" class="attached enabled">Oct</option>
            <option value="Nov" class="attached enabled">Nov</option>
            <option value="Dec" class="attached enabled">Dec</option></select><a class="reset_variations" href="#" style="visibility: hidden;">Clear</a> </td>
    </tr>
  </tbody>

</table>

在 JS 或 PHP 中最好的方法是什么?

【问题讨论】:

  • 基于 wordpress 是使用 PHP 开发的事实,我会很想在那里做而不是将它暴露给前端并用 javascript “删除”它。
  • What would be the best way to do this in either JS or PHP? 该问题主要基于意见 Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. - 生成选项创建属性,即:data-start-date="xxx" 然后在 JS 中显示/隐藏您需要的内容根据条件。当你有你工作的代码时,把它贴在Minimal, Complete, and Verifiable example
  • 抱歉,我并不是说最好用 JS 或 PHP 来做,我的意思是问最好的方法是什么以及我将如何去做。跨度>

标签: javascript php jquery wordpress woocommerce


【解决方案1】:

您可以将选项列表替换为:

<option value="">Choose an option</option>
<?php
for ($m=1; $m<=12; $m++) {
    $currentMonth = date('n');
    $nextMonth = date('n') == 12 ? 1 : date('n') + 1;

    if ($m == $currentMonth || $m == $nextMonth) continue;

    $month = date('M', mktime(0,0,0,$m, 1, date('Y')));

    echo '<option value="'.$month.'" class="attached enabled">'.$month.'</option>';
}
?>

这提供了您发布的相同选项列表,减去当前和下个月。

PHP Sandbox

【讨论】:

    【解决方案2】:

    正如我所说,我会在PHP 中进行操作。您需要找出当前月份是哪个月份,并且不要在本月或下个月的列表中添加option。你可以使用类似的东西:

    <?php
        $months = array("Jan", "Feb", ..., "Dec");
        $thismonth = date('M');
        $date = date("Y-m-d");
        $date = strtotime(date("Y-m-d", strtotime($date)) . " +1 month");
        $nextmonth = date("M",$date);
        foreach ($months as $month) :
            if ($month != $thismonth && $month != $nextmonth):
                echo "<option value=\"" . $month . "\">" . $month . "</option>";
            endif;
        endforeach
    ?>
    

    【讨论】:

      猜你喜欢
      • 2023-02-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多