当前位置：Gxlcms > JavaScript > Avalonjs双向数据绑定与监听的实例代码

Avalonjs双向数据绑定与监听的实例代码

时间：2021-07-01 10:21:17 帮助过：9人阅读

废话不多说了，直接给大家贴代码了，具体代码如下所示：

  1. <div class="content_table" ms-controller="checkname">
  2.   <table>
  3.     <thead>
  4.       <tr>
  5.         <th width="15%">提交核名</th>
  6.         <th width="85%">请提供您打算使用的3个公司名称，我们将帮您注册并向登记机关提交您的核名信息。</th>
  7.       </tr>
  8.     </thead>
  9.     <tbody >
  10.       <tr>
  11.         <td colspan="2">
  12.           <p class="or">看我的公司名是否已被占用</p>
  13.           <a class="refer">立即查询</a>
  14.         </td>
  15.       </tr>
  16.       <tr>
  17.       <td colspan="2">
  18.         <p class="matter">
  19.           <label>
  20.             <span>行政区域：</span>
  21.             <select name="" id="selArea" class="select_t" :duplex="@AdministrativeRegions">
  22.               <option value="天津市">天津市</option>
  23.             </select>
  24.           </label>
  25.         </p>
  26.         <form action="" id="c_name">
  27.         <p class="matter">
  28.           <label>
  29.             <span>字号：</span>
  30.             <input class="thing thing_nn" type="text" placeholder="云信" name='c_name' ms-duplex="@FiledOne"><br>
  31.             <input class="thing thing_nn thing_add" type="text" name='s_name' placeholder="请输入第二个公司名称" ms-duplex="@FiledTwo"><br>
  32.             <input class="thing thing_nn thing_add" type="text" name='t_name' placeholder="请输入第三个公司名称" ms-duplex="@FiledThree">
  33.             <p class="err_tips"></p>
  34.             <h4 style="font-weight: 300;width: 80%;margin: 0 0 20px 65px;"><em>提示：</em>1.企业名称=行政区域+字号+行业特点+公司类型，如北京云信科技有限公司，字号则为云信；2.字号由两个以上的汉字组成，不可输入外国文字、汉语拼音、阿拉伯数字；</h4>
  35.           </label>
  36.         </p>
  37.         </form>
  38.         <p class="matter">
  39.           <label>
  40.             <span>行业特点：</span>
  41.             <select ms-duplex="@firstSelected" class="select_t thing" id="trade_a">
  42.               <option ms-for="el in @first" ms-attr="{value:el}" >{{el}}</option>
  43.             </select>
  44.             <select class="select_t thing" id="trade_b" :duplex="@secondSelected">
  45.               <option ms-for="el in @second" ms-attr="{value:el}" >{{el}}</option>
  46.             </select>
  47.           </label>
  48.         </p>
  49.         <p class="matter">
  50.           <label>
  51.             <span>公司类型：</span>
  52.             <a style="display: inline-block;">{{@TypeOfCompany}}</a>
  53.           </label>
  54.         </p>
  55.         <div class="text_t">根据您输入的信息生成的名称如下（请选择您中意的3个名称）：</div>
  56.         <div class="three_select">
  57.           <label><input type="checkbox" name="apk[]" value="1">{{@AdministrativeRegions + @FiledOne + @secondSelected + @TypeOfCompany}}</label>
  58.           <label><input type="checkbox" name="apk[]" value="2">{{@FiledOne }} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label>
  59.           <label><input type="checkbox" name="apk[]" value="3">{{@FiledOne + @secondSelected }} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>
  60.           <!--<label><input type="checkbox" name="apk[]" value="10">{{@AdministrativeRegions + @FiledOne + @secondSelected + @TypeOfCompany}}</label>
  61.           <label><input type="checkbox" name="apk[]" value="11">{{@FiledOne }} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label>
  62.           <label><input type="checkbox" name="apk[]" value="12">{{@FiledOne + @secondSelected }} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>-->
  63.           <div class="my_comp_f">
  64.             <label><input type="checkbox" name="apk[]" value="4">{{@AdministrativeRegions + @FiledTwo + @secondSelected + @TypeOfCompany}}</label>
  65.             <label><input type="checkbox" name="apk[]" value="5">{{@FiledTwo}} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label>
  66.             <label><input type="checkbox" name="apk[]" value="6">{{@FiledTwo + @secondSelected}} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>
  67.           </div>
  68.           <div class="my_comp_t">
  69.             <label><input type="checkbox" name="apk[]" value="7">{{@AdministrativeRegions + @FiledThree + @secondSelected + @TypeOfCompany}}</label>
  70.             <label><input type="checkbox" name="apk[]" value="8">{{@FiledThree}} ({{@AdministrativeRegions}}) {{@secondSelected + @TypeOfCompany}}</label>
  71.             <label><input type="checkbox" name="apk[]" value="9">{{@FiledThree + @secondSelected}} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>
  72.           </div>
  73.         </div>
  74.         <div class="table_button">
  75.           <!--<a class="next_step" href="submit_name_perfect.html" rel="external nofollow" >下一步，完善核名信息</a>-->
  76.           <a class="next_step" href="javascript:void(0);" rel="external nofollow" >下一步，完善核名信息</a>
  77.         </div>
  78.       </td>
  79.     </tr>
  80.     </tbody>
  81.   </table>
  82. </div>
  83. <script src="https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.2.4/avalon.min.js"></script>
  84. $(document).ready(function(){
  85.   var citys=$('#selArea').val();
  86. if(citys == "天津市"){
  87.   $('.refer').attr("href","http://zzsb.tjmqa.gov.cn/selfreport/nameregister/goMain");
  88.   $('#selArea').append('<option>天津</option><option>天津滨海新区</option><option>天津市滨海新区</option>');
  89. }else if(citys == "绵阳市"){
  90.   $('#selArea').append('<option>绵阳</option><option>绵阳高新区</option>');
  91. }
  92. });
  93. var map = {
  94.   "科技类": ['请选择','科技','教育科技','科技发展','生物科技','电子科技','环保科技','网络科技','生化科技','激光科技','节能科技','能源科技','农业科技','医药科技等'],
  95.   "技术类": ['请选择','技术','环境技术','农业高新技术','检测技术','信息技术','经济技术','消防技术','工程技术','机电技术','生物技术','新能源技术'],
  96.   "文化类": ['请选择','文化','文化发展','文化传播','文化传媒','文化交流'],
  97.   "咨询类": ['请选择','咨询','信息咨询','教育咨询','投资咨询','管理咨询','建筑设计咨询','文化信息咨询'],
  98.   "培训类": ['请选择','培训','技术培训','企业管理培训','计算机技术培训'],
  99.   "设计类": ['请选择','设计','建筑设计','家居装饰设计','旅游规划设计'],
  100.   "服务类": ['请选择','服务','劳务服务','会议服务','家政服务','商务服务','婚庆服务'],
  101.   "广告类": ['请选择','广告','广告传媒'],
  102.   "商贸类": ['请选择','商贸','贸易','服装装饰','针纺织品','装饰品'],
  103.   "贸易类": ['请选择','进出口贸易'],
  104.   "租赁类": ['请选择','建筑机械设备租赁','骑车租赁'],
  105.   "工程类": ['请选择','工程','建筑工程','装饰工程','园林绿化工程','照明工程','通讯工程'],
  106.   "物流类": ['请选择','物流','物流运输'],
  107.   "管理类": ['请选择','管理','投资管理','企业管理','餐饮管理','管理顾问','金融管理'],
  108.   "维修类": ['请选择','维修','电器维修','机械维修'],
  109.   "机械设备类": ['请选择','机械设备','办公设备','消防设备','自控设备','机电设备','冷暖设备','环保设备','测试设备','电力设备','实验室设备'],
  110.   "印刷类": ['请选择','印刷','印刷设计','印刷技术','印刷器材'],
  111.   "医疗器械": ['请选择','医疗器械'],
  112.   "养殖": ['请选择','养殖'],
  113.   "房地产经纪": ['请选择','房地产经纪']
  114. };
  115. var vm = avalon.define({
  116.   $id: 'checkname',
  117.   AdministrativeRegions: '天津',
  118.   FiledOne: '云信',
  119.   FiledTwo: '',
  120.   FiledThree:'',
  121.   Features:'科技',
  122.   TypeOfCompany:'有限公司',
  123.   first: ["科技类", "技术类", "文化类","咨询类","培训类","设计类","服务类","广告类","商贸类","贸易类","租赁类","工程类","物流类","管理类","维修类","机械设备类","印刷类","医疗器械","养殖","房地产经纪"],
  124.   second: map['科技类'].concat(),
  125.   firstSelected: "科技类",
  126.   secondSelected: "请选择",
  127. });
  128. vm.$watch("firstSelected", function (a) {
  129.   vm.second = map[a].concat()
  130.   vm.secondSelected = vm.second[0] 
  131. });
  132. vm.$watch("FiledTwo", function (a) {$('.my_comp_f').show()});
  133. vm.$watch("FiledThree", function (a) {$('.my_comp_t').show()});

以上所述是小编给大家介绍的Avalonjs双向数据绑定与监听的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！