Problème de liste déroulante JQuery Cascade?

Question

J'utilise JQuery basé Cascade plugin probablement cela fonctionne, mais je l'ai trouvé beaucoup de problèmes avec elle

Peut-être que quelqu'un déjà confronté à ce plugin et pourrait peut-être aider.

Alors, j'utiliser ce plug-in pour la filtration de l'emplacement

location http://clip2net.com/clip/m12007/1246819525-clip-2kb.png location http://clip2net.com/clip/m12007/1246819608-clip-3kb.png

Here Comes mon code CS:

public JsonResult getChildren(string val) 
    { 
     if (val.IsNotNull()) 
     { 
      int lId = val.ToInt(); 
      Cookie.Location = val.ToInt(); 
      var forJSON = from h in Location.SubLocationsLoaded(val.ToInt()) 
          select new { When = val, Id = h.Id, Name = h.Name, LocationName = h.LocationType.Name }; 
      return this.Json(forJSON.ToArray()); 
     } 
     else 
      return null; 
    } 

Here Comes mon code JS:

<script type="text/javascript"> 
function commonMatch(selectedValue) { 
    $("#selectedLocation").val(selectedValue); 
    return this.When == selectedValue; 
}; 
function commonTemplate(item) { 
    return "<option value='" + item.Id + "'>" + item.Name + "</option>"; 
}; 


$(document).ready(function() { 
    $("#chained_child").cascade("#Countries", { 
     ajax: { 
      url: '/locations/getChildren' 
     }, 
     template: commonTemplate, 
     match: commonMatch 
    }).bind("loaded.cascade", function(e, target) { 
     $(this).prepend("<option value='empty' selected='true'>------[%Select] Län------</option>"); 
     $(this).find("option:first")[0].selected = true; 
    }); 
    $("#chained_sub_child").cascade("#chained_child", { 
     ajax: { 
      url: '/locations/getChildren' 
     }, 
     template: commonTemplate, 
     match: commonMatch 
    }).bind("loaded.cascade", function(e, target) { 
     $(this).prepend("<option value='empty' selected='true'>------[%Select] Kommun------</option>"); 
     $(this).find("option:first")[0].selected = true; 
    }); 
    $("#chained_sub_sub_child").cascade("#chained_sub_child", { 
     ajax: { 
      url: '/locations/getChildren' 
     }, 
     template: commonTemplate, 
     match: commonMatch 
    }).bind("loaded.cascade", function(e, target) { 
     $(this).prepend("<option value='empty' selected='true'>------[%Select] Stad------</option>"); 
     $(this).find("option:first")[0].selected = true; 

    }); 

}); 

j'ai ajouté une condition à jquery.cascade.ext.js

if (opt.getParentValue(parent) != "empty") 
      $.ajax(_ajax); 

Pour éviter la demande Ajax sans valeur sélectionnée, mais je face à problème, lorsque je réinitialise la sélection dans la première boîte boîte 3D et ne le fait pas ci-dessous rafraichissement WTF? http://clip2net.com/clip/m12007/1246822534-clip-2kb.png

Et deuxième question: Je voudrais savoir où est le meilleur endroit pour injecter ma propre fonction qui fera quelque chose, avec une exigence - je dois savoir que toutes les boîtes ont terminé le travail.

Si quelqu'un travaillait à l'intérieur laissez-moi savoir peut-être que nous pourrions ensemble trouver une solution. Merci dans le conseil ...

Answer 1

Le problème avec le code de plugin d'origine est qu'il ne déclenche pas l'événement de changement après qu'il manipule la liste déroulante.

Aussi, j'aime penser à ce problème en termes de «dépendance» et non de «cascade». J'ai essayé de créer un simple plugin et une page de démonstration qui montre comment tout cela fonctionne.

Démo: http://jsbin.com/unope

code: http://jsbin.com/unope/edit

Laissez-moi vous expliquer ce que je l'ai fait. J'ai créé le plugin nommé 'dependent' qui vous permet d'associer une dépendance à une liste déroulante.

par exemple.

$('#dropDown2').dependent({ 
          dependency : 'dropDown1', 
          values : getValues 
         }); 

code ci-dessus suggère que dropDown2 dépend dropDown1, donc chaque fois que des changements de valeur dropDown1, il appellera votre fonction getValues ​​(le passant dropDown1). Vous devriez retourner les valeurs pertinentes de votre fonction getValues ​​et les remplir dans dropDown2. Gardez à l'esprit que ce code n'est pas générique, je l'ai rapidement écrit pour démontrer le concept.

Vous devrez l'ajuster davantage pour obtenir le résultat souhaité.

Faites-moi savoir si vous avez des questions.