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


Posted in Javascript onJune 23, 2017

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

<div class="content_table" ms-controller="checkname">
  <table>
    <thead>
      <tr>
        <th width="15%">提交核名</th>
        <th width="85%">请提供您打算使用的3个公司名称,我们将帮您注册并向登记机关提交您的核名信息。</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>行政区域:</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>字号:</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="请输入第二个公司名称" ms-duplex="@FiledTwo"><br>
            <input class="thing thing_nn thing_add" type="text" name='t_name' placeholder="请输入第三个公司名称" ms-duplex="@FiledThree">
            <p class="err_tips"></p>
            <h4 style="font-weight: 300;width: 80%;margin: 0 0 20px 65px;"><em>提示:</em>1.企业名称=行政区域+字号+行业特点+公司类型,如北京云信科技有限公司,字号则为云信;2.字号由两个以上的汉字组成,不可输入外国文字、汉语拼音、阿拉伯数字;</h4>
          </label>
        </p>
        </form>
        <p class="matter">
          <label>
            <span>行业特点:</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">根据您输入的信息生成的名称如下(请选择您中意的3个名称):</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>天津滨海新区</option><option>天津市滨海新区</option>');
}else if(citys == "绵阳市"){
  $('#selArea').append('<option>绵阳</option><option>绵阳高新区</option>');
}
});
var map = {
  "科技类": ['请选择','科技','教育科技','科技发展','生物科技','电子科技','环保科技','网络科技','生化科技','激光科技','节能科技','能源科技','农业科技','医药科技等'],
  "技术类": ['请选择','技术','环境技术','农业高新技术','检测技术','信息技术','经济技术','消防技术','工程技术','机电技术','生物技术','新能源技术'],
  "文化类": ['请选择','文化','文化发展','文化传播','文化传媒','文化交流'],
  "咨询类": ['请选择','咨询','信息咨询','教育咨询','投资咨询','管理咨询','建筑设计咨询','文化信息咨询'],
  "培训类": ['请选择','培训','技术培训','企业管理培训','计算机技术培训'],
  "设计类": ['请选择','设计','建筑设计','家居装饰设计','旅游规划设计'],
  "服务类": ['请选择','服务','劳务服务','会议服务','家政服务','商务服务','婚庆服务'],
  "广告类": ['请选择','广告','广告传媒'],
  "商贸类": ['请选择','商贸','贸易','服装装饰','针纺织品','装饰品'],
  "贸易类": ['请选择','进出口贸易'],
  "租赁类": ['请选择','建筑机械设备租赁','骑车租赁'],
  "工程类": ['请选择','工程','建筑工程','装饰工程','园林绿化工程','照明工程','通讯工程'],
  "物流类": ['请选择','物流','物流运输'],
  "管理类": ['请选择','管理','投资管理','企业管理','餐饮管理','管理顾问','金融管理'],
  "维修类": ['请选择','维修','电器维修','机械维修'],
  "机械设备类": ['请选择','机械设备','办公设备','消防设备','自控设备','机电设备','冷暖设备','环保设备','测试设备','电力设备','实验室设备'],
  "印刷类": ['请选择','印刷','印刷设计','印刷技术','印刷器材'],
  "医疗器械": ['请选择','医疗器械'],
  "养殖": ['请选择','养殖'],
  "房地产经纪": ['请选择','房地产经纪']
};
var vm = avalon.define({
  $id: 'checkname',
  AdministrativeRegions: '天津',
  FiledOne: '云信',
  FiledTwo: '',
  FiledThree:'',
  Features:'科技',
  TypeOfCompany:'有限公司',
  first: ["科技类", "技术类", "文化类","咨询类","培训类","设计类","服务类","广告类","商贸类","贸易类","租赁类","工程类","物流类","管理类","维修类","机械设备类","印刷类","医疗器械","养殖","房地产经纪"],
  second: map['科技类'].concat(),
  firstSelected: "科技类",
  secondSelected: "请选择",
});
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双向数据绑定与监听的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
非常好的js代码
Jun 27 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 #Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 #Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 #jQuery
详解webpack异步加载业务模块
Jun 23 #Javascript
详解微信第三方小程序代开发
Jun 23 #Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 #Javascript
详解用vue.js和laravel实现微信支付
Jun 23 #Javascript
You might like
PHP动态变静态原理
2006/11/25 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php中explode与split的区别介绍
2012/10/03 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
护理职业生涯规划书
2014/01/24 职场文书
面试后的感谢信范文
2014/02/01 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
商铺消防安全责任书
2014/07/29 职场文书
明星员工获奖感言
2014/08/14 职场文书
放飞理想演讲稿
2014/09/09 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
2014年班级工作总结
2014/11/14 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
python tkinter实现定时关机
2021/04/21 Python
java版 联机五子棋游戏
2022/05/04 Java/Android
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技