使用语义UI下拉('set selected')方法无法正常加载下拉列表

时间:2015-12-10 09:08:41

标签: jquery semantic-ui

我正在使用Semantic UI,我正在动态地将日期添加到我的<select>中,如下所示:

$('#sel_date').dropdown();

for(var i =-10;i<100;i++){
      var weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
      var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug","Sep","Oct","Nov","Dec"];
      var date = new Date();
      date.setDate(date.getDate()+i);

      var weekday = weekdays[date.getDay()];
      var month = months[date.getMonth()];
      var day = date.getDate();
      day = day >= 10 ? day : '0' + day;      
      var val = formatDate(date);
      var textFormat = day+" "+month+" "+weekday;
      $("#sel_date").append("<option value="+val+">"+textFormat+"</option>");

      console.log(val);
}

function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}  

我添加的value格式为YYYY-MM-DD

我想将默认选择作为今天的日期,所以我做了如下:

$('#sel_date').dropdown('set selected','2015-12-10');

我正在加载dropdown动态是因为它不起作用?

请检查我的小提琴:FIDDLE

1 个答案:

答案 0 :(得分:1)

您只是在向元素添加选项之前初始化HEADERS_DIR= $(PROJECT_ROOT)/include $(CC) -I $(HEADERS_DIR) -o $(APP_NAME) $(OBJS) 。所以你可以改变这个:

&#13;
&#13;
dropdown
&#13;
// Add javascript here
for (var i = -10; i < 100; i++) {
  var weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  var date = new Date();
  date.setDate(date.getDate() + i);

  var weekday = weekdays[date.getDay()];
  var month = months[date.getMonth()];
  var day = date.getDate();
  day = day >= 10 ? day : '0' + day;
  var val = formatDate(date);
  var textFormat = day + " " + month + " " + weekday;
  $("#sel_date").append("<option value=" + val + ">" + textFormat + "</option>");

  console.log(val);
}

function formatDate(date) {
  var d = new Date(date),
    month = '' + (d.getMonth() + 1),
    day = '' + d.getDate(),
    year = d.getFullYear();

  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;

  return [year, month, day].join('-');
}

$('#sel_date').dropdown('set selected', '2015-12-10'); // <----just this one and done.
&#13;
body {
    padding: 1em;
}
&#13;
&#13;
&#13;