Plug-in de liaison multi-niveaux de boîte à sélection multiple implémenté par jQuery_jquery

Plug-in de liaison de boîtes à sélection multiple implémenté par jQuery

Copier le code Le code est le suivant :

// Utilisation : $(_event_src_).autoSelect(_reload_, reload_url);
// Le frontend utilise la méthode get pour transmettre l'attribut "name" de la balise l' sélectionnée
// Le backend utilise Transmission des données au format json
// Format : { valeur : attribut "valeur" de , texte : afficher le texte de }
(function($) {
$.fn. extend({
autoSelect : function(dest, url) {
return this.each(function() {
$.SelectChange($ (this), $(dest), url);
});
},

// Réinitialiser la case à cocher
$.SelectReset = function(target) {
if (target != null) {
$.SelectReset(target.data("nextSelect"));
target.empty(); defaultOpt"));
}
};

// Charger la case à cocher
$.SelectLoad = function(target, data) {
$.each(data, function( index, contenu) {
var option = $("")
.attr("value", content.value).text(content.text); target.append(option);
} );
};

// Lier l'événement de changement
$.SelectChange = function(cible, destination, url) {
// Lier la chaîne de liaison
target.data ("nextSelect", dest);

// Enregistrez l'option par défaut (première option)
if (target.data("defaultOpt") == null)
target.data("defaultOpt" , target.children().first());
dest.data("defaultOpt", dest.children().first());

$(document).ready(function() {
target.change(function(event) {
var _target = event.target || window.event.srcElement;
if (_target.value != target.data("defaultOpt").attr ("value")) {
$.getJSON(url, {
"name": _target.name,
"value": _target.value
}, function(data, status) {
if (status == "success") {
$.SelectReset(target.data("nextSelect")); ("nextSelect"), data);
}
}); // Transmettre les données au format json en arrière-plan
} else {
$.SelectReset(target.data("nextSelect") );
}
});
} ;
})(jQuery);

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Un guide complet sur l'utilisation de javascript pour générer des rapports dans les compétences excel_javascriptArticle suivant：Un guide complet sur l'utilisation de javascript pour générer des rapports dans les compétences excel_javascript

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved