根据当前日期在Dropdownlist中设置默认值

时间：2017-04-12 15:32:06

标签： javascript html-select

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

<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将默认值设置为今天当前月份？

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
$(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"));
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

将日期字符串与今天的日期字符串进行比较

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

相关问题
最新问题