динамические параметры в select2 после нажатия какой-либо кнопки

Я использую 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' }
];

Подводя итоги: я хочу изменить данные выбора ЧАСОВ при изменении выбора ДНЕЙ.

Любая помощь? Спасибо!


javascript jquery select2
person Baumannzone    schedule 29.09.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел этот вопрос, заданный несколько лет назад, и в одном ответе предлагается вызвать .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>

person Sᴀᴍ Onᴇᴌᴀ    schedule 29.09.2016
comment
Спасибо, это то, что я нашел сегодня. Я удаляю все ‹options› выбора, затем визуализирую новые данные, как вы говорите, с помощью $("#item").select2({data: data}); - person Baumannzone; 30.09.2016