Question

为了缩短问题，我想要完成的是根据我从下拉列表SELECT中选择的选项显示MONTH，DATERANGE和YEAR。所以这就是我的Dropbox所拥有的......

我的月份SELECT有选项1月到12月，我的期间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>

PERIOD

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

现在，如果我选择例如8月份，然后2（第2周是8月3日至9日）期间和2014年，则标签应显示此

2014年8月3日至9日

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

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

根据下拉列表显示月份日期范围和年份

1 个答案: