최근에 나는 양식 카테고리의 일부 모바일 페이지를 편집했으며 지방, 도시 및 지구 간의 연계 선택을 만났습니다. 나는 원래 공공 도서관에서 이전 PC 측 PC면 주, 시립 및 지구를 사용하고 싶었지만 휴대폰에 대한 PC 쪽의 효과가 너무 불만족하다는 것을 알았습니다. 이 디자인은 특정 디자인 효과를 제공하지 않았으므로, 나는 선택된 원주민 지방, 시립 및 지구 선택 효과를 혼자서 컴파일해야했습니다. 스타일은 휴대폰의 효과를 사용합니다. 스타일 효과가 옳고 사용될 수 있다고 생각합니다. 데이터는 여전히 PC 데이터에서 사용되지만 구성 요소를 다시 작성했습니다. 코드 효과는 다음과 같습니다.
var $ = require ( 'jquery'), $ wind 함수 영역 (옵션) {옵션 = $ .extend ({}, __defaults__, 옵션); var that = this; that.wrapper = $ (Options.wrap); that.selectarr = that.wrapper.data ( 'default')? that.wrapper.data ( 'default'). split ( ',') : [110000,110100,110101]; // that.Items = 옵션 .items; that.itemname = 옵션 .itemname; that.callback = 옵션 .callback; that.setValue (); that.events (); that.default = that.wrapper.data ( 'default'); // 주, 도시 및 지구 ID의 기본 출력. var validval = that.default! == 정의되지 않은? that.default : ''; that.validinput.val (validval); } area.prototype = {생성자 : 영역, // 해당 데이터를 선택하고 출력합니다. // 기본 기본값이 출력되지 않으면 기본값은 해당 채우기 프롬프트를 추가합니다. for (data in data) {html += '<옵션 값 = "' +data [k] .id +'"' +(selectId === data [k] .id? } html += '</select>'; 반환 html; }, // 초기 값 setValue를 설정하십시오 : function () {var that = this, html = ''; $ .Each (that.selectarr, function (index, k) {that.index = index; html += that.createitems (that.items [index], that.getData (that.items [index], that.selectarr [index-1], K);}); '지방') {return data.provinces || []; // 패턴 정보는 PID가 필요하지 않습니다} if (type === 'city') {return data.cities [pid] || []; } if (type === 'area') {return data.areas [pid] || []; }}, // 선택 색인 값 가져 오기 getItemIndex : function (type) {var that = this; for (var i = 0, l = that.items.length; i <l; i ++) {if (that.items [i] == type) {return i; }}}, // 변경이 트리거되면 다음 값을 선택하여 setitemVal : function (select) {var that = this; var $ this = select, previous = $ this.val (), $ type = $ this.attr ( 'name'), $ nxttype = ''; if ($ type! = 'area') {$ nxttype = that.Items [that.getItemIndex ($ type) +1]; var data = that.getData ($ nxttype, previd), html = that.createitems ($ nxttype, data, previd), nextselect = $ ( 'select [name = "'+$ nxttype+'"]'); if ($ this.siplings ( 'select [name = "'+$ nxttype+'"]. length> 0) {nextselect.remove (); } $ this.after (html); nextselect.find ( '옵션 : 첫 번째'). prop ( 'selected', true); $ ( 'select [name = "'+$ nxttype+'"]'). 트리거 ( 'change'); } else {that.validInput.val ($ this.val ()). trigger ( 'validate')} that.index = that.getItemIndex ($ type); // 콜백 함수 트리거 후 변경을 설정할 수있는 경우 (that.callback) {that.callback.call (this, select, that.getitemindex ($ type)); }}, 이벤트 : function () {var that = this; // 변경 사항 변경 이벤트 선택 $ doc.on ( 'change', '. area-container select', function () {that.setitemval ($ (this))}} module.exports = area;HTML 코드 :
코드 코드를 다음과 같이 복사하십시오. <input type = "hidden"name = "defaultArea"value = ""id = "default-area"> // 확인 트리거 확인을 추가하기 위해 필수 필드.
<div data-default = ""> </div>
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.