单击某个按钮后，select2中的动态选项

Question

我在我的网站上使用Select2，我需要在用户互动后用新的选项重新加载（更改）选项中的选项。

我有这个：

当我选择一天时，我需要重新加载数小时。因为每天都有不同的时间，如下所示：

这是我的javascript对象，包含我需要的所有信息（不需要AJAX）：

var ob = [
  {
    // Don't worry about activityId
    activityId: '1234',
    days: [
      {
        //Some date format
        id: '20161001',
        //Available hours for each day
        hours: ["10:00", "11:00"]
      },
      {
        id: '20161002',
        hours: ["10:00", "12:00"]
      }
    ]
  },
  {
    activityId: '4567',
    days: [
      {
        id: '20161003',
        hours: ["10:30", "19:00"]
      },
      {
        id: '20161002',
        hours: ["10:00", "14:00"]
      }
    ]
  }
]

我一直在尝试使用$('#selectId').select2({ data: data })，但它只会将data添加到当前可用的data，并且只能使用一次。第二次不再添加了。

我想删除选项并设置新选项。我在select2 doc＆＃39;中使用了这个变量：

var data = [
  { id: 0, text: 'enhancement' }, 
  { id: 1, text: 'bug' }, 
  { id: 2, text: 'duplicate' }, 
  { id: 3, text: 'invalid' }, 
  { id: 4, text: 'wontfix' }
];

汇总：我想在DAYS选择更改时更改HOURS选择的数据。

有任何帮助吗？ 谢谢！

Answer 1

几年前我找到了this question，一个答案建议在添加新数据选项之前在元素上调用.html('') ...

试试这个：

var ob = {
    // Don't worry about activityId
    activityId: '1234',
    days: [
      {
        //Some date format
        id: '20161001',
        //Available hours for each day
        hours: ["10:00", "11:00"]
      },
      {
        id: '20161002',
        hours: ["10:00", "12:00"]
      }
    ]
  };
var days = ob.days.map(function(day) {
	return {id: day.id, text: day.id};
});

$("#e1").select2({data: days});
$("#e1").change(function(arguments) {
	var value = $("#e1").val();
  var day = ob.days.find(function(day) {
  	return day.id == value;
  });
  var selectList2 = $("#e2");
  selectList2.html('');//this will clear the existing values
  selectList2.select2({data: day.hours});
  selectList2.show(); //in case it wasn't visible before
});

.select2 {
  width:100%;
  min-width: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="e1"></select>
<select id="e2" style="display: none"></select>