根据下拉菜单显示月份和年份

Display Month daterange and Year based on dropdowns

本文关键字：显示 下拉菜单      更新时间：2023-09-26

为了简化问题，我试图完成的是根据我从下拉SELECT中选择的选项显示MONTH、DATERANGE和YEAR。这就是我的dropboxes…

我的月份SELECT有选项1月到12月，我的周期SELECT是1到5，代表周(第1周到第5周)，最后是年份SELECT

这是那三个的代码。

<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>

和YEAR

<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>

现在，如果我选择八月为月，2(第二周是8月3日至9日)为期间，2014为年，那么标签应该显示这个

2014年8月3日- 9日

这可能吗?只是想要一些建议。谢谢你们的帮助。

试试这个:但是不要忘记在你的下拉菜单中添加value，因为我现在可以看到它是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);
    });
});

相关文章：