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);
