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 相关文章推荐
图片onload事件触发问题解决方法
Jul 31 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
JSONP基础知识详解
Mar 19 Javascript
原生js轮播特效
May 18 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
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
mysql+php分页类(已测)
2008/03/31 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
教大家制作简单的php日历
2015/11/17 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
linux面试题参考答案(9)
2016/01/29 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
工作推荐信范文
2014/05/10 职场文书
岗位工作说明书
2014/07/29 职场文书
社区两委对照检查材料
2014/08/23 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
行政文员岗位职责
2015/02/04 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python