单击某些按钮后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 文档中的这个变量：

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>