最近、フォームカテゴリのモバイルページをいくつか編集し、州、都市、地区間のリンク選択に遭遇しました。私はもともと、公共図書館の以前の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をもっとサポートすることを願っています。