Multi-select box multi-level linkage plug-in implemented by jQuery

Multi-select box linkage plug-in implemented by jQuery

Copy code The code is as follows: // Use: $(_event_src_).autoSelect(_reload_, reload_url); // The frontend uses the get method to transmit the attribute "name" of the tag and the attribute "value" of the selected // The backend uses Transmitting data in json format // Format: { value: attribute "value" of , text: display text of } (function($) { $.fn. extend({ autoSelect: function(dest, url) { return this.each(function() { $.SelectChange($(this), $(dest), url); }); }, });

// Reset checkbox $.SelectReset = function(target) { if (target != null) { $.SelectReset(target.data("nextSelect")); target.empty(); target.append(target.data("defaultOpt")); } };

// Load check box $.SelectLoad = function(target, data) { $.each(data, function(index, content) { var option = $(" ") .attr("value", content.value).text(content.text); target.append(option); } ); };

// Bind change event $.SelectChange = function(target, dest, url) { // Bind linkage chain target.data ("nextSelect", dest);

// Record the default option (first 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")); $.SelectLoad(target.data("nextSelect"), data); } }); // Transmit data in json format in the background } else { $.SelectReset(target.data("nextSelect")); } }); }); }; })(jQuery);

Multi-select box multi-level linkage plug-in implemented by jQuery_jquery