Question

我正在创建一个包含两个选择框的表单，以允许用户选择一个月份和年份来取消会员资格。所选月份不应是当月或过去几个月。我添加了一些jQuery来预先选择当前月份之后的月份，但它仍然允许用户根据需要选择上个月。

我想要实现的是一个基于所选年份删除选项的脚本。例如：如果选择2016（并且我们现在在2016年10月），则脚本应删除选项1到10。

我怀疑它并不太复杂，但我对jQuery的了解非常有限。提前谢谢。

Codepen：http://codepen.io/ricardoh/pen/vXpdvQ

这是HTML：

<select id="month">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<select id="year">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

和jQuery：

$(function(){
    var month = new Date().getMonth() + 1;
    if( month > 12 ) month = 1;
    document.getElementById("month").options[month].selected = true;
});

Answer 1

这样的事情怎么样？ JSFiddle

function adjustMonths() {
   var thisYear = new Date().getFullYear() + ""; //Get current year
   var nextMonth = new Date().getMonth()+2 + ""; //Get next month
   var selectedYear = $('#year option:selected').val(); //Selected Year
   if (nextMonth .length == 1) {
      nextMonth = "0" + nextMonth ; //Add preceding "0" to single-digit month
   }

   var yearAndMonth = parseInt(thisYear+nextMonth); //Create integer of year+month

   $('#month option').each(function() { //Loop through all month options

      var selectMonth = $(this).prop('value'); //Get option value

      if (selectMonth.length == 1) {
         selectMonth = "0" + selectMonth; //Add preceding "0" to single-digit month
      }

      if (parseInt(selectedYear + selectMonth) < yearAndMonth) {
         $(this).hide(); //If the selected year + this month are less than the current year and month, hide this month
      } else {
         $(this).show(); //Otherwise, show it
      }

   });

   $("#month option").prop('selected', false); //Unselect all
   $("#month").find("option:visible:first").prop('selected', true); //Select first visible month from dropdown

}

$(document).ready(function() {
    adjustMonths(); //run script on pageload

    $('#year').change(function() {
      adjustMonths(); //run script when changing the year dropdown
    })

});

Answer 2

我正在研究这个问题，而我注意到这个问题已得到回答和接受，认为第二个答案不会受到影响。

$(function(){
    var monthElem = document.getElementById('month');
    var yearElem = document.getElementById('year');
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var createOption = function(monthID) {
        var elem = document.createElement('option');
        elem.value = monthID+1;
        elem.text = months[monthID];
        return elem;
        };
    var evt = document.createEvent('HTMLEvents');
    yearElem.addEventListener('change', function() {
        var now = new Date(), tmp;
        var month = now.getMonth();
        if(now.getFullYear() === parseInt(this.value)) {
            tmp = month;
            while(tmp >= 0) monthElem.remove(tmp--);
        }
        else {
            tmp = monthElem.length = 0;
            while(tmp < 12) monthElem.add(createOption(tmp), tmp++);
        }
    }, false);
    evt.initEvent('change', false, true);
    yearElem.dispatchEvent(evt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="month">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<select id="year">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

根据所选年份从选择框中删除过去和当前月份选项

2 个答案: