Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實(shí)例代碼
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<div class="content_table" ms-controller="checkname"> <table> <thead> <tr> <th width="15%">提交核名</th> <th width="85%">請(qǐng)?zhí)峁┠蛩闶褂玫?個(gè)公司名稱,我們將幫您注冊(cè)并向登記機(jī)關(guān)提交您的核名信息。</th> </tr> </thead> <tbody > <tr> <td colspan="2"> <p class="or">看我的公司名是否已被占用</p> <a class="refer">立即查詢</a> </td> </tr> <tr> <td colspan="2"> <p class="matter"> <label> <span>行政區(qū)域:</span> <select name="" id="selArea" class="select_t" :duplex="@AdministrativeRegions"> <option value="天津市">天津市</option> </select> </label> </p> <form action="" id="c_name"> <p class="matter"> <label> <span>字號(hào):</span> <input class="thing thing_nn" type="text" placeholder="云信" name='c_name' ms-duplex="@FiledOne"><br> <input class="thing thing_nn thing_add" type="text" name='s_name' placeholder="請(qǐng)輸入第二個(gè)公司名稱" ms-duplex="@FiledTwo"><br> <input class="thing thing_nn thing_add" type="text" name='t_name' placeholder="請(qǐng)輸入第三個(gè)公司名稱" ms-duplex="@FiledThree"> <p class="err_tips"></p> <h4 style="font-weight: 300;width: 80%;margin: 0 0 20px 65px;"><em>提示:</em>1.企業(yè)名稱=行政區(qū)域+字號(hào)+行業(yè)特點(diǎn)+公司類型,如北京云信科技有限公司,字號(hào)則為云信;2.字號(hào)由兩個(gè)以上的漢字組成,不可輸入外國文字、漢語拼音、阿拉伯?dāng)?shù)字;</h4> </label> </p> </form> <p class="matter"> <label> <span>行業(yè)特點(diǎn):</span> <select ms-duplex="@firstSelected" class="select_t thing" id="trade_a"> <option ms-for="el in @first" ms-attr="{value:el}" >{{el}}</option> </select> <select class="select_t thing" id="trade_b" :duplex="@secondSelected"> <option ms-for="el in @second" ms-attr="{value:el}" >{{el}}</option> </select> </label> </p> <p class="matter"> <label> <span>公司類型:</span> <a style="display: inline-block;">{{@TypeOfCompany}}</a> </label> </p> <div class="text_t">根據(jù)您輸入的信息生成的名稱如下(請(qǐng)選擇您中意的3個(gè)名稱):</div> <div class="three_select"> <label><input type="checkbox" name="apk[]" value="1">{{@AdministrativeRegions + @FiledOne + @secondSelected + @TypeOfCompany}}</label> <label><input type="checkbox" name="apk[]" value="2">{{@FiledOne }} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label> <label><input type="checkbox" name="apk[]" value="3">{{@FiledOne + @secondSelected }} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label> <!--<label><input type="checkbox" name="apk[]" value="10">{{@AdministrativeRegions + @FiledOne + @secondSelected + @TypeOfCompany}}</label> <label><input type="checkbox" name="apk[]" value="11">{{@FiledOne }} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label> <label><input type="checkbox" name="apk[]" value="12">{{@FiledOne + @secondSelected }} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>--> <div class="my_comp_f"> <label><input type="checkbox" name="apk[]" value="4">{{@AdministrativeRegions + @FiledTwo + @secondSelected + @TypeOfCompany}}</label> <label><input type="checkbox" name="apk[]" value="5">{{@FiledTwo}} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label> <label><input type="checkbox" name="apk[]" value="6">{{@FiledTwo + @secondSelected}} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label> </div> <div class="my_comp_t"> <label><input type="checkbox" name="apk[]" value="7">{{@AdministrativeRegions + @FiledThree + @secondSelected + @TypeOfCompany}}</label> <label><input type="checkbox" name="apk[]" value="8">{{@FiledThree}} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label> <label><input type="checkbox" name="apk[]" value="9">{{@FiledThree + @secondSelected}} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label> </div> </div> <div class="table_button"> <!--<a class="next_step" href="submit_name_perfect.html" rel="external nofollow" >下一步,完善核名信息</a>--> <a class="next_step" href="javascript:void(0);" rel="external nofollow" >下一步,完善核名信息</a> </div> </td> </tr> </tbody> </table> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.2.4/avalon.min.js"></script> $(document).ready(function(){ var citys=$('#selArea').val(); if(citys == "天津市"){ $('.refer').attr("href","http://zzsb.tjmqa.gov.cn/selfreport/nameregister/goMain"); $('#selArea').append('<option>天津</option><option>天津?yàn)I海新區(qū)</option><option>天津市濱海新區(qū)</option>'); }else if(citys == "綿陽市"){ $('#selArea').append('<option>綿陽</option><option>綿陽高新區(qū)</option>'); } }); var map = { "科技類": ['請(qǐng)選擇','科技','教育科技','科技發(fā)展','生物科技','電子科技','環(huán)保科技','網(wǎng)絡(luò)科技','生化科技','激光科技','節(jié)能科技','能源科技','農(nóng)業(yè)科技','醫(yī)藥科技等'], "技術(shù)類": ['請(qǐng)選擇','技術(shù)','環(huán)境技術(shù)','農(nóng)業(yè)高新技術(shù)','檢測技術(shù)','信息技術(shù)','經(jīng)濟(jì)技術(shù)','消防技術(shù)','工程技術(shù)','機(jī)電技術(shù)','生物技術(shù)','新能源技術(shù)'], "文化類": ['請(qǐng)選擇','文化','文化發(fā)展','文化傳播','文化傳媒','文化交流'], "咨詢類": ['請(qǐng)選擇','咨詢','信息咨詢','教育咨詢','投資咨詢','管理咨詢','建筑設(shè)計(jì)咨詢','文化信息咨詢'], "培訓(xùn)類": ['請(qǐng)選擇','培訓(xùn)','技術(shù)培訓(xùn)','企業(yè)管理培訓(xùn)','計(jì)算機(jī)技術(shù)培訓(xùn)'], "設(shè)計(jì)類": ['請(qǐng)選擇','設(shè)計(jì)','建筑設(shè)計(jì)','家居裝飾設(shè)計(jì)','旅游規(guī)劃設(shè)計(jì)'], "服務(wù)類": ['請(qǐng)選擇','服務(wù)','勞務(wù)服務(wù)','會(huì)議服務(wù)','家政服務(wù)','商務(wù)服務(wù)','婚慶服務(wù)'], "廣告類": ['請(qǐng)選擇','廣告','廣告?zhèn)髅?], "商貿(mào)類": ['請(qǐng)選擇','商貿(mào)','貿(mào)易','服裝裝飾','針紡織品','裝飾品'], "貿(mào)易類": ['請(qǐng)選擇','進(jìn)出口貿(mào)易'], "租賃類": ['請(qǐng)選擇','建筑機(jī)械設(shè)備租賃','騎車租賃'], "工程類": ['請(qǐng)選擇','工程','建筑工程','裝飾工程','園林綠化工程','照明工程','通訊工程'], "物流類": ['請(qǐng)選擇','物流','物流運(yùn)輸'], "管理類": ['請(qǐng)選擇','管理','投資管理','企業(yè)管理','餐飲管理','管理顧問','金融管理'], "維修類": ['請(qǐng)選擇','維修','電器維修','機(jī)械維修'], "機(jī)械設(shè)備類": ['請(qǐng)選擇','機(jī)械設(shè)備','辦公設(shè)備','消防設(shè)備','自控設(shè)備','機(jī)電設(shè)備','冷暖設(shè)備','環(huán)保設(shè)備','測試設(shè)備','電力設(shè)備','實(shí)驗(yàn)室設(shè)備'], "印刷類": ['請(qǐng)選擇','印刷','印刷設(shè)計(jì)','印刷技術(shù)','印刷器材'], "醫(yī)療器械": ['請(qǐng)選擇','醫(yī)療器械'], "養(yǎng)殖": ['請(qǐng)選擇','養(yǎng)殖'], "房地產(chǎn)經(jīng)紀(jì)": ['請(qǐng)選擇','房地產(chǎn)經(jīng)紀(jì)'] }; var vm = avalon.define({ $id: 'checkname', AdministrativeRegions: '天津', FiledOne: '云信', FiledTwo: '', FiledThree:'', Features:'科技', TypeOfCompany:'有限公司', first: ["科技類", "技術(shù)類", "文化類","咨詢類","培訓(xùn)類","設(shè)計(jì)類","服務(wù)類","廣告類","商貿(mào)類","貿(mào)易類","租賃類","工程類","物流類","管理類","維修類","機(jī)械設(shè)備類","印刷類","醫(yī)療器械","養(yǎng)殖","房地產(chǎn)經(jīng)紀(jì)"], second: map['科技類'].concat(), firstSelected: "科技類", secondSelected: "請(qǐng)選擇", }); vm.$watch("firstSelected", function (a) { vm.second = map[a].concat() vm.secondSelected = vm.second[0] }); vm.$watch("FiledTwo", function (a) {$('.my_comp_f').show()}); vm.$watch("FiledThree", function (a) {$('.my_comp_t').show()});
以上所述是小編給大家介紹的Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript驗(yàn)證18位身份證號(hào)碼最后一位正確性的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript驗(yàn)證18位身份證號(hào)碼最后一位正確性的實(shí)現(xiàn)代碼,小編親測有效,需要的朋友可以參考下2014-08-08JS target與currentTarget區(qū)別說明
target在事件流的目標(biāo)階段;currentTarget在事件流的捕獲,目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時(shí)候,兩個(gè)的指向才是一樣的,而當(dāng)處于捕獲和冒泡階段的時(shí)候,target指向被單擊的對(duì)象而currentTarget指向當(dāng)前事件活動(dòng)的對(duì)象(一般為父級(jí))。2011-08-08uniapp自定義tabbar的方法(支持中間凸起、角標(biāo)、動(dòng)態(tài)隱藏tab和全端適用)
一個(gè)項(xiàng)目有多個(gè)角色,比如醫(yī)生和患者,tabBar跳轉(zhuǎn)的路徑不一樣,但是在pages.json中無法配置多個(gè)tabBar,這時(shí)候就要自定義tabBar了,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義tabbar(支持中間凸起、角標(biāo)、動(dòng)態(tài)隱藏tab和全端適用)的相關(guān)資料,需要的朋友可以參考下2023-04-04淺談JavaScript中定義變量時(shí)有無var聲明的區(qū)別
這篇文章主要介紹了JavaScript中定義變量時(shí)有無var聲明的區(qū)別分析以及示例分享,需要的朋友可以參考下2014-08-08JS對(duì)話框_JS模態(tài)對(duì)話框showModalDialog用法總結(jié)
本篇文章主要是對(duì)JS對(duì)話框_JS模態(tài)對(duì)話框showModalDialog的用法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01原生js實(shí)現(xiàn)可愛糖果數(shù)字時(shí)間特效
本文主要介紹了原生js實(shí)現(xiàn)可愛糖果數(shù)字時(shí)間特效的實(shí)例代碼,附效果展示和代碼演示。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2016-12-12