jQuery_jquery로 구현된 다중 선택 상자 다중 레벨 연결 플러그인-JS 튜토리얼-php.cn

jQuery로 구현한 다중 선택 상자 연결 플러그인

코드 복사 코드는 다음과 같습니다. // 사용: $(_event_src_).autoSelect(_reload_, reload_url) // 프런트엔드는 get 메소드를 사용하여 태그의 "name" 속성과 선택한 // 백엔드는 json 형식의 데이터 전송을 사용합니다. // 형식: { value: 의 속성 "value", text: 의 표시 텍스트 🎜>(function($) { $.fn.extend({ autoSelect: function(dest, url) { return this.each(function() { $.SelectChange($ (this), $(dest), url) }); }, })

// 체크박스 재설정 $.SelectReset = function(target) { if (target != null) { $.SelectReset(target.data("nextSelect")) target.empty() target.append(target.data(" defaultOpt")); } };

// 로드 체크박스 $.SelectLoad = function(target, data) { $.each(data, function( index, content) { var option = $(" ") .attr("value", content.value).text(content.text) target.append(option); } ); };

// 바인드 변경 이벤트 $.SelectChange = function(target, dest, url) { // 바인딩 체인 target.data ("nextSelect", dest);

// 기본 옵션 기록(첫 번째 옵션) 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 ("값")) { $.getJSON(url, { "name": _target.name, "value": _target.value }, function(data, status) { if (status == "success") { $.SelectReset(target.data("nextSelect")) $.SelectLoad(target.data ("nextSelect"), data); } }) // 백그라운드에서 json 형식으로 데이터를 전송합니다. } else { $.SelectReset(target.data("nextSelect") ); }); })(jQuery);