根据当前日期在下拉列表中设置默认值

Question

如果我有这样的下拉列表：

<select id="dropdown">
    <option value="2017-01-01T00:00:00">January 2017</option>
    <option value="2017-02-01T00:00:00">February 2017</option>
    <option value="2017-03-01T00:00:00">March 2017</option>
    <option value="2017-04-01T00:00:00">April 2017</option>
    <option value="2017-05-01T00:00:00">May 2017</option>
    <option value="2017-06-01T00:00:00">June 2017</option>
    <option value="2017-07-01T00:00:00">July 2017</option>
    <option value="2017-08-01T00:00:00">August 2017</option>
    <option value="2017-09-01T00:00:00">September 2017</option>
    <option value="2017-10-01T00:00:00">October 2017</option>
    <option value="2017-11-01T00:00:00">November 2017</option>
    <option value="2017-12-01T00:00:00">December 2017</option>
    <option value="2018-01-01T00:00:00">January 2018</option>
    <option value="2018-02-01T00:00:00">February 2018</option>
    <option value="2018-03-01T00:00:00">March 2018</option>
    <option value="2018-04-01T00:00:00">April 2018</option>
    <option value="2018-05-01T00:00:00">May 2018</option>
    <option value="2018-06-01T00:00:00">June 2018</option>
    <option value="2018-07-01T00:00:00">July 2018</option>
</select>

如何通过js设置默认值等于今天的当前月份年份？

Answer 1

比较日期字符串和今天的日期字符串

// get current year/month as string
var d= new Date().toISOString().slice(0,7);

var opts = document.getElementById('dropdown').options;

[].forEach.call(opts, function(opt){
    // set "selected" based on year/month matching current
    opt.selected = opt.value.slice(0,7) === d;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
    <option value="2017-01-01T00:00:00">January 2017</option>
    <option value="2017-02-01T00:00:00">February 2017</option>
    <option value="2017-03-01T00:00:00">March 2017</option>
    <option value="2017-04-01T00:00:00">April 2017</option>
    <option value="2017-05-01T00:00:00">May 2017</option>
    <option value="2017-06-01T00:00:00">June 2017</option>
    <option value="2017-07-01T00:00:00">July 2017</option>
    <option value="2017-08-01T00:00:00">August 2017</option>
    <option value="2017-09-01T00:00:00">September 2017</option>
    <option value="2017-10-01T00:00:00">October 2017</option>
    <option value="2017-11-01T00:00:00">November 2017</option>
    <option value="2017-12-01T00:00:00">December 2017</option>
    <option value="2018-01-01T00:00:00">January 2018</option>
    <option value="2018-02-01T00:00:00">February 2018</option>
    <option value="2018-03-01T00:00:00">March 2018</option>
    <option value="2018-04-01T00:00:00">April 2018</option>
    <option value="2018-05-01T00:00:00">May 2018</option>
    <option value="2018-06-01T00:00:00">June 2018</option>
    <option value="2018-07-01T00:00:00">July 2018</option>
</select>

Answer 2

你可以这样做。

var d = new Date();
var m = d.getMonth() + 1;
var str = d.getFullYear() + "-" + (m >= 10 ? "" : "0") + m + "-01T00:00:00";
var select = document.getElementById("dropdown"); 
var options = select.options;
for(var i = 0; i < options.length; i++){
    if(options[i].value == str){
        select.selectedIndex = i;
        break;
    }
}

<select id="dropdown">
    <option value="2017-01-01T00:00:00">January 2017</option>
    <option value="2017-02-01T00:00:00">February 2017</option>
    <option value="2017-03-01T00:00:00">March 2017</option>
    <option value="2017-04-01T00:00:00">April 2017</option>
    <option value="2017-05-01T00:00:00">May 2017</option>
    <option value="2017-06-01T00:00:00">June 2017</option>
    <option value="2017-07-01T00:00:00">July 2017</option>
    <option value="2017-08-01T00:00:00">August 2017</option>
    <option value="2017-09-01T00:00:00">September 2017</option>
    <option value="2017-10-01T00:00:00">October 2017</option>
    <option value="2017-11-01T00:00:00">November 2017</option>
    <option value="2017-12-01T00:00:00">December 2017</option>
    <option value="2018-01-01T00:00:00">January 2018</option>
    <option value="2018-02-01T00:00:00">February 2018</option>
    <option value="2018-03-01T00:00:00">March 2018</option>
    <option value="2018-04-01T00:00:00">April 2018</option>
    <option value="2018-05-01T00:00:00">May 2018</option>
    <option value="2018-06-01T00:00:00">June 2018</option>
    <option value="2018-07-01T00:00:00">July 2018</option>
</select>

Answer 3

创建一个日期字符串，然后将<select>的值设置为它：

$(document).ready(() => {
  var d = new Date();
  var year = d.getYear();
  var month = d.getMonth();
  var thisMonth = new Date(year + 1900, month);
  $("#dropdown").val(thisMonth.toLocaleFormat("%Y-%m-01T00:00:00"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
    <option value="2017-01-01T00:00:00">January 2017</option>
    <option value="2017-02-01T00:00:00">February 2017</option>
    <option value="2017-03-01T00:00:00">March 2017</option>
    <option value="2017-04-01T00:00:00">April 2017</option>
    <option value="2017-05-01T00:00:00">May 2017</option>
    <option value="2017-06-01T00:00:00">June 2017</option>
    <option value="2017-07-01T00:00:00">July 2017</option>
    <option value="2017-08-01T00:00:00">August 2017</option>
    <option value="2017-09-01T00:00:00">September 2017</option>
    <option value="2017-10-01T00:00:00">October 2017</option>
    <option value="2017-11-01T00:00:00">November 2017</option>
    <option value="2017-12-01T00:00:00">December 2017</option>
    <option value="2018-01-01T00:00:00">January 2018</option>
    <option value="2018-02-01T00:00:00">February 2018</option>
    <option value="2018-03-01T00:00:00">March 2018</option>
    <option value="2018-04-01T00:00:00">April 2018</option>
    <option value="2018-05-01T00:00:00">May 2018</option>
    <option value="2018-06-01T00:00:00">June 2018</option>
    <option value="2018-07-01T00:00:00">July 2018</option>
</select>