最近、フォームカテゴリのモバイルページをいくつか編集し、州、都市、地区間のリンク選択に遭遇しました。私はもともと、公共図書館の以前のPC側の地方、市、および地区を使用したかったのですが、携帯電話に対するPC側の効果はあまりにも不十分であることがわかりました。この設計では特定の設計効果が得られなかったため、自分でネイティブネイティブの地方、地方自治体、地区の選択効果をコンパイルする必要がありました。このスタイルは、携帯電話の効果を使用します。スタイル効果はちょうど適切で、使用できると感じています。データは引き続きPCデータで使用されていますが、コンポーネントを書き直しました。コード効果は次のとおりです。
var $ = require（ 'jquery'）、$ window = $（window）、data = require（ './ data-new'）、$ doc = $（document）; var __defaults__ = {wrap： ''、 'uting'、 'city'、 'area']関数領域（オプション）{options = $ .extend（{}、__defaults__、options）; var that = this; that.wrapper = $（options.wrap）; that.selectarr = that.wrapper.data（ 'default'）？thit.thit.wrapper.data（ 'default'）。 // that.items = options.items; that.itemname = options.itemname; that.callback = options.callback; that.setValue（）; that.events（）; that.default = that.wrapper.data（ 'default'）; //州、都市、地区IDのデフォルト出力that.validInput = $（ "＃default-area"）; var validval = that.default！== undefined？that.default： ''; that.validinput.val（validval）; } area.prototype = {constructor：area、// select select and outputに対応するデータcreateiTems：function（itemname、data、selectid）{var this = this; //デフォルトのデフォルト値が出力でない場合、デフォルトは対応する塗りつぶしプロンプトを追加してvar html = '<select name = "'+itemname+'">'+（thit.default === undefined？ '<optionname+' "selected =" selected "> '+'+'</option>' '）; for（var k in data）{html += '<option value = "' +data [k] .id +'"' +（selectid === data [k] .id？ 'selected = "selected"'： ''） +'>' +data [k] .name +'</option>'; } html += '</select>'; HTMLを返します。 }、//初期値SetValue：function（）{var this = 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）;}）that.wrapper.apper.appad（html） （type === 'province'）{data.provinces ||を返します[]; //パターン情報はpidを必要としません[]; } if（type === 'area'）{return data.areas [pid] || []; }}、// get selectインデックス値getItemindex：function（type）{var this = 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、fortion = $ 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.siblings（ 'select [name = "'+$ nxttype+'"]'）。長さ> 0）{nextselect.remove（）; } $ this.after（html）; nextselect.find（ 'option：first'）。prop（ 'selected'、true）; $（ 'Select [name = "'+$ nxttype+'"]'）。トリガー（ 'change'）; } else {that.validinput.val（$ this.val（））。trigger（ 'validate'）} thit.Index = that.getItemindex（$ type）; //トリガー後に変更を設定できる場合、コールバック関数}}、events：function（）{var that = this; // select event $ doc.on（ 'change'、 '。areg-container select'、function（）{that.setItemval（$（this））;}）}} module.exports = area;HTMLコード：
コードコードを次のようにコピーします。
<div data-default = ""> </div>
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。