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

Question

I'm using Select2 in my website and I need to reload (change) the options in the select with new ones after some user interaction.

I have this:

When I chose one day, I need to reload hours. Because each day has different hours available, like this:

This is my javascript object with all the info I need (No AJAX needed):

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"]
      }
    ]
  }
]

I've been trying with $('#selectId').select2({ data: data }) but it only adds data to the current data available and it only works once. Second time is not adding anymore.

I want to delete options and set new ones. I'm using this variable from select2 doc's:

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

Summarize : I want to change the data of the HOURS select when the DAYS select changes.

Any help? Thanks!

Answer 1

I found this question from a few years ago, and one answer suggests calling .html('') on the element before adding the new data options...

Try this:

 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>