隐藏基于日期的下拉选项

时间:2018-01-08 14:02:40

标签: javascript php jquery wordpress woocommerce

我正在设计一个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>
&#13;
&#13;
&#13;

在JS或PHP中执行此操作的最佳方法是什么?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

正如我所说,我是在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
?>