Связанные / сцепленные выпадающие списки MagicSuggest?

Question

Я пытаюсь создать набор связанных / связанных цепочек множественного выбора, используя MagicSuggest и PHP-запрос. Итак, сначала я создаю окно MagicSuggest с функцией для изменения ms1:

$(document).ready(function() {
var ms1 = $('#ms1').magicSuggest({
    data: 'datams1.php',
    displayField: 'name' });

$(ms1).on('selectionchange', function(event, combo, selection){
    run(selection);});
});

Затем я создаю новое окно MagicSuggest, запустив php-запрос, который возвращает объект json:

function run(country) {
$.getJSON("query.php", { id: country[0].id}, callbackFuncWithData );
}

function callbackFuncWithData(region) {
var ms2 = $('#ms2').magicSuggest({
    data: region,
    displayField: 'name'
    });
}

Это работает, когда я делаю первоначальный выбор, но не обновляется, если я изменяю выбор. Я проверил, и в рамках "callbackFuncWithData" я создаю обновленный объект "регион" json. Так что, может быть, мне нужно обновить / перезагрузить мой объект # ms2.

Мои вопросы:

1. Есть ли способ принудительно обновить данные MagicSuggest?
2. Существует ли лучший / более чистый / более эффективный способ использования результатов одного блока MagicSuggest для запроса и возврата данных для второго связанного блока MagicSuggest?

Спасибо!

Answer 1

1. используйте метод setData() для динамической установки данных при необходимости.
2. вы всегда можете использовать библиотеку, например angular, чтобы связать свойства компонента вместе.

Answer 2

Этот код создает две связанные комбинации с одинаковыми данными, но одна из них показывает поле "имя", а другая показывает поле "имя1".

function reflectSelection(ms1, ms2){
var val = parseInt(ms1.getValue());
var val1 = parseInt(ms2.getValue());
if(!isNaN(val)){
  if(val != val1){
    ms2.clear(true);
    ms2.setSelection(ms1.getSelection());
  }
}
else
{
  ms2.clear(true);
  }

 }

 var msName = $('#ms-onselectionchange').magicSuggest({
    maxSelectionRenderer: function(){ return ''; },
    useTabKey: true,
    noSuggestionText: '',
    strictSuggest: true,
    maxSelection: 1,
    allowFreeEntries: false,
    placeholder : '',
    data: [{'id':0, 'name':'Paris', 'name1':'Paris5'}, {'id':1, 'name':'New York', 'name1':'New York5'}],
  });

var msName1 = $('#ms-onselectionchange1').magicSuggest({
    maxSelectionRenderer: function(){ return ''; },
    useTabKey: true,
    noSuggestionText: '',
    displayField: 'name1',
    strictSuggest: true,
    maxSelection: 1,
    allowFreeEntries: false,
    placeholder : '',
    data: [{'id':0, 'name':'Paris', 'name1':'Paris5'}, {'id':1, 'name':'New York', 'name1':'New York5'}],
  });
  $(msName).on('selectionchange', function(e,m){
   reflectSelection(msName, msName1);

  });

  $(msName1).on('selectionchange', function(e,m){
    reflectSelection(msName1, msName);
   });