في الآونة الأخيرة ، قمت بتجميع بعض الصفحات المتنقلة من فئات النماذج وواجهت اختيار الرابط بين المقاطعات والمدن والمقاطعات. كنت أرغب في الأصل في استخدام المقاطعات السابقة والبلدية والبلدية في المكتبة العامة ، لكنني وجدت أن تأثير جانب الكمبيوتر على الهاتف المحمول غير مرض للغاية. لم يعط التصميم تأثيرًا محددًا للتصميم ، لذلك اضطررت إلى تجميع تأثير اختيار المحافظات الأصلي والبلدية واختيار المقاطعة بنفسي. يستخدم النمط تأثير الهاتف المحمول. أشعر أن تأثير النمط صحيح تمامًا ويمكن استخدامه. لا تزال البيانات تستخدمها بيانات الكمبيوتر ، لكنني أعيد كتابة المكونات. تأثير الكود كما يلي:
var $ = require ('jQuery') ، $ window = $ (window) ، data = require ('./ data-new') ، $ doc = $ (document) ؛ var __defaults__ = {wall: '' ، itemName: ['pressince' ، 'city' ، 'area'] ، under: ['Courn' ، 'City' ، 'ARIME'] منطقة الوظيفة (خيارات) {stions = $ .extend ({} ، __defaults__ ، reports) ؛ var that = هذا ؛ that.wrapper = $ (Options.wrap) ؛ that.selectarr = that.wrapper.data ('default')؟ that.wrapper.data ('default'). split ('،'): [110000،110100،110101] ؛ // that.items = OptionS.Items ؛ that.itemname = Options.itemname ؛ that.callback = Options.callback ؛ that.setValue () ؛ that.events () ؛ that.default = that.wrapper.data ('default') ؛ // الإخراج الافتراضي للمقاطعة والمدينة والمنطقة معرف That.validInput = $ ("#area-area") ؛ var validval = that.default! == undefined؟ that.default: '' ؛ that.validinput.val (ValidVal) ؛ } area.prototype = {constructor: area ، // إنشاء تحديد وإخراج البيانات المقابلة CreateItems: function (itemName ، data ، selectId) {var that = this ؛ // إذا لم يتم إخراج القيمة الافتراضية الافتراضية ، فإن الافتراضي يضيف مطالبة التعبئة المقابلة لتحديد var html = '<select name = "'+itemName+'">'+(that.default === undefined؟ لـ (var k في البيانات) {html += '<value value = "' +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) ؛}) (type === 'Province') {return data.provinces || [] ؛ // معلومات النمط لا تتطلب pid} إذا (type === 'city') {return data.cities [pid] || [] ؛ } if (type === 'area') {return data.areas [pid] || [] ؛ }} ، // الحصول على تحديد قيمة الفهرس getItemIndex: الدالة (النوع) {var that = this ؛ لـ (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 ، previour = $ 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 [' '+$ nxttype+' "] ') ؛ if ($ this.siblings ('SELECT [' '+'+$ nxttype+'"]'). length> 0) {nextelect.remove () ؛ } $ this.after (html) ؛ nextselect.find ('الخيار: الأول'). الدعامة ("محدد" ، صحيح) ؛ $ ('select [name = "'+$ nxttype+'"]'). trigger ('change') ؛ } آخر {that.validInput.val ($ this.val ()). الزناد ('التحقق من صحة')} that.index = that.getItemIndex ($ type) ؛ // وظيفة رد الاتصال إذا كان يمكن تعيين دالة الاتصال بعد التشغيل إذا (that.callback) {that.callback.call (هذا ، حدد ، that.getItemIndex (type $)) ؛ }} ، الأحداث: function () {var that = this ؛ .رمز HTML:
انسخ رمز الرمز كما يلي: <إدخال type = "hidden" name = "defaultarea" value = "" id = "default-area"> // الحقول المطلوبة ، من أجل إضافة التحقق من مشغل التحقق
<div data-default = ""> </viv>
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.