链接/链接的MagicSuggest下拉列表


Linked/chained MagicSuggest dropdowns?

我正在尝试使用MagicShuggest和php查询构建一组链接/链接的多选框。因此,首先我构建了一个MagicSsuggest框,其中包含ms1更改时的函数:

$(document).ready(function() {
var ms1 = $('#ms1').magicSuggest({
    data: 'datams1.php',
    displayField: 'name' });
$(ms1).on('selectionchange', function(event, combo, selection){
    run(selection);});
});

然后,我通过运行一个返回json对象的php查询来构建一个新的MagicSuggest框:

function run(country) {
$.getJSON("query.php", { id: country[0].id}, callbackFuncWithData );
}
function callbackFuncWithData(region) {
var ms2 = $('#ms2').magicSuggest({
    data: region,
    displayField: 'name'
    });
}

这在我进行初始选择后有效,但如果我更改选择,则不会更新。我已经检查过了,在我的"callbackFuncWithData"中,我正在生成一个更新的"region"json对象。所以我可能只是需要刷新/重新加载我的#ms2对象。

我的问题是:

  1. 有没有办法强制刷新MagicSuggest数据
  2. 是否有更好/更干净/更有效的方法来使用一个MagicSuguest框的结果来查询并返回第二个链接的MagicSugue框的数据

谢谢!

  1. 使用setData()方法在需要时动态设置数据
  2. 您可以始终使用类似angular的库来将零部件特性绑定在一起

这段代码生成了两个具有相同数据的链接组合,但其中一个显示"name"字段,另一个显示了"name1"字段。

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);
   });