javascript - 根据下拉菜单显示月份日期范围和年份

Question

简而言之，我想要完成的是根据我从下拉菜单中选择的选项来显示月份、日期范围和年份。这就是我的保管箱中的内容...

我的月份 SELECT 有 OPTIONS 一月到十二月，我的周期 SELECT 是 1 到 5，代表周(第 1 周到第 5 周)，最后一个是年份 SELECT

这是这 3 个的代码。

月

<div class="input-group-addon" style="width:20%;" title='Filter By'>
    <!--MONTH-->
       <label for="month" style="padding-right: 10px;margin-top:7px;">Month</label>
          <select name="month" id="month" class="text ui-widget-content ui-corner-all">
                <option value="">Choose Month</option>
                <option value="">January</option>
                <option value="">February</option>
                <option value="">March</option>
                <option value="">April</option>
                <option value="">May</option>
                <option value="">June</option>
                <option value="">July</option>
                <option value="">August</option>
                <option value="">September</option>
                <option value="">October</option>
                <option value="">Novermber</option>
                <option value="">December</option>
          </select>
    <!--MONTH-->
  </div>

句号

<div class="input-group-addon" style="width:20%;" title='Filter By' id = "perioddiv">   
    <!--PERIOD-->
       <label for="period" style="padding-right: 10px;margin-top:7px;" visible="false">Period</label>
          <select name="period" id="period" class="text ui-widget-content ui-corner-all">
                <option value="">Choose Period</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
          </select>
    <!--PERIOD-->
  </div>

和年份

<div class="input-group-addon" style="width:20%;" title='Filter By'>
    <!--YEAR-->
       <label for="year" style="padding-right: 10px;margin-top:7px;">Year</label>
          <select name="year" id="year" class="text ui-widget-content ui-corner-all">
                <option value="">Choose Year</option>
                <option value="">1990</option>
                <option value="">1991</option>
                <option value="">1992</option>
                <option value="">1993</option>
                <option value="">1994</option>
                <option value="">1995</option>
                <option value="">1996</option>
                <option value="">1997</option>
                <option value="">1998</option>
                <option value="">1999</option>
                <option value="">2000</option>
                <option value="">2001</option>
                <option value="">2002</option>
                <option value="">2003</option>
                <option value="">2004</option>
                <option value="">2005</option>
                <option value="">2006</option>
                <option value="">2007</option>
                <option value="">2008</option>
                <option value="">2009</option>
                <option value="">2010</option>
                <option value="">2011</option>
                <option value="">2012</option>
                <option value="">2013</option>
                <option value="">2014</option>
                <option value="">2015</option>
                <option value="">2016</option>
                <option value="">2017</option>
                <option value="">2018</option>
                <option value="">2019</option>
                <option value="">2020</option>
          </select>
    </div>    

现在，如果我选择月份为 8 月，则期间为 2(第 2 周为 8 月 3 日至 9 日)，年份为 2014 年，则标签应显示此内容

August 3 - 9, 2014

这可能吗？只是询问一些提示。感谢先生和女士的帮助。

Answer 1

试试这个:但不要忘记在下拉列表中输入值，因为我可以看到它现在是 value=""

$(function(){
    $('input[type=button]').click(function(){
      var dateStr = "";
      var month = $('#month').val();
      var monthToDisplay = $('#month option[value='+month+']').text();
      var period = $('#period').val();
      var year = $('#year').val();
      var date = new Date(month+'/01/'+year);
      var day = date.getDay();
      var diff = 7 - parseInt(day);
      var start = 1;
      var end = 31;
      var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
        //alert(lastDay);
      if(period ==1)
      {
          end = diff;
      }
      else
      {
         start = diff + 7 * (parseInt(period) - 2)
        end = start+6;
        if(parseInt(end) > parseInt(lastDay))
           end = lastDay;
      }
       dateStr = monthToDisplay+', '+start+' - '+end+' '+year;
      $('#dateStr').html(dateStr);
    });
});

<强> Demo