2016-01-16 1 views
0

J'utilise MagicSuggest pour la liste déroulante personnalisée, maintenant j'ai deux catégories et sous-catégories de listes déroulantes .. les sous-catégories doivent être remplies en fonction de la sélection des catégories. Lorsque je sélectionne la catégorie, puis la sous-catégorie, cela fonctionnera pour la première fois, mais si je change de catégorie, les sous-catégories ne changeront pas et afficheront la même liste. voici mon jquery ..Plusieurs listes déroulantes dépendantes de MagicSuggest ne fonctionnent pas

var cat = $('#category').magicSuggest({ 
    maxSelection:1, 
    data: site+'project/getCats/', 
    valueField: 'id', 
    displayField: 'title', 
    mode: 'remote', 
    renderer: function(data){ 
     return '<div>' + 
       '<div class="title">' + data.title + '</div>' + 
      '</div>'; 
    }, 
    resultAsString: true, 
    selectionRenderer: function(data){ 
     return '<div class="name">' + data.title + '</div>'; 
    } 
}); 
$(cat).bind('selectionchange', function(event, combo, selection){ 
    cat_id = cat.getValue(); 
    src = site+'project/getCats/'+cat_id; 
    var subcat = $('#sub_category').magicSuggest({ 
     maxSelection:1, 
     data: src, 
     valueField: 'id', 
     displayField: 'title', 
     mode: 'remote', 
     renderer: function(data){ 
      return '<div>' + 
        '<div class="title">' + data.title + '</div>' + 
       '</div>'; 
     }, 
     resultAsString: true, 
     selectionRenderer: function(data){ 
      return '<div class="name">' + data.title + '</div>'; 
     } 
    }); 
}) 

Répondre

0

Comme personne ne répondait que je prendrai le risque ..

Tiré de Magicsuggest page d'accueil http://nicolasbize.com/magicsuggest/doc.html.

Je pense que vous devez utiliser setData() qui définit les objets listés dans la liste déroulante.

var ms = $('#ms-setData').magicSuggest({}); 
ms.setData(['Paris', 'New York', 'Gotham']); 
$(ms).on('selectionchange', function(){ 
    alert(JSON.stringify(this.getSelection())); 
    this.setData([ 
     {id:1, name:'Blue'}, 
     {id:2, name:'Red'} 
    ]); 
}); 

Si vous allez au lien que j'ai posté ci-dessus, vous trouverez un exemple de travail. Vous choisissez d'abord une ville, par exemple Paris, puis les options sont changées en couleurs afin que vous puissiez sélectionner le bleu.

Vous pouvez modifier votre code pour utiliser setData sur la "sous_catégorie".