使用语义 UI dropdown('set selected') 方法动态加载下拉列表不起作用

Question

我正在使用 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：FIDDLE

Answer 1

您只是在向元素添加选项之前初始化 dropdown。所以你可以改变这个：

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

body {
    padding: 1em;
}

<link href="http://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<select class="ui fluid search dropdown" style="width:100%;" id="sel_date" name="sel_date">
  <option value="0">Select an option</option>
</select>

使用语义 UI dropdown('set selected') 方法动态加载下拉列表不起作用

Loading dropdown dynamically using semantic UI dropdown('set selected') method not working

jquery

semantic-ui