链接/链接的MagicSuggest下拉菜单?

时间:2013-08-21 09:57:20

标签: php jquery magicsuggest

我正在尝试使用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);});
});

然后我通过运行返回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”中生成一个更新的“区域”json对象。所以我可能需要刷新/重新加载我的#ms2对象。

我的问题是:

  1. 有没有办法强制刷新MagicSuggest数据?
  2. 是否有更好/更清洁/更有效的方法来使用一个MagicSuggest框的结果查询并返回第二个链接的MagicSuggest框的数据?
  3. 谢谢!

2 个答案:

答案 0 :(得分:0)

  1. 使用setData()方法在需要时动态设置数据。
  2. 您始终可以使用像angular这样的库来将组件属性绑定在一起。

答案 1 :(得分:0)

此代码使2个链接的组合具有相同的数据,但其中一个显示" 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);
   });