easyUI下拉列表点击事件使用方法


Posted in Javascript onMay 18, 2017

本文实例为大家分享了使用easyUI下拉列表点击事件的方法,供大家参考,具体内容如下

可以通过input select来创建下拉列表

其中select的创建如下:

通过json来创建js数组

[{  
  "id":1,  
  "text":"text1"  
},{  
  "id":2,  
  "text":"text2"  
},{  
  "id":3,  
  "text":"text3",  
  "selected":true  
},{  
  "id":4,  
  "text":"text4"  
},{  
  "id":5,  
  "text":"text5"  
}]

例子:

html代码片段:

<select id="in_edit_netlink" style="width:160px;" class="easyui-combobox" data-options="valueField:'id',textField:'text',editable:false" >
</select>

js代码片段:

var ljfsArray = new Array();
  var objHTTP = new Object();
  objHTTP.text = "HTTP";
  var objTCP = new Object();
  objTCP.text = "TCP";
  objTCP.id = 1;
  objHTTP.id = 2;
  if (data.ljfs == "HTTP") {
    objHTTP.selected=true;
  } else {
    objTCP.selected=true;
  }
  ljfsArray.push(objHTTP);
  ljfsArray.push(objTCP);
  $('#in_edit_netlink').combobox('loadData', ljfsArray);

页面效果显示:

easyUI下拉列表点击事件使用方法

属性解释:

valueField:'id'---objTCP.id--->选项值value
textField:'text'---objTCP.text--->页面显示值
objTCP.selected=true; --->默认显示

点击修改事件

onSelect 等同于   onChange
但是麻烦的是:easyUI中不支持onChange,在html中不支持onSelect。
onSelect必须在js代码中使用:

$("#in_edit_netlink").combobox({
    onSelect: function () {
      connectionType = $('#in_edit_netlink').val();
      if (connectionType == 1) {
       $('#in_edit_sjjh').textbox('setValue', tcpIp);
      } else {
       $('#in_edit_sjjh').textbox('setValue', httpIp);
      }
    }
  })

使用

$(function () {
  
})

默认加载后,onSelect事件就可以正常使用了。

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json简单介绍
Jun 10 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
js实现查询商品案例
Jul 22 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 #Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 #Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 #Javascript
JS验证全角与半角及相互转化的介绍
May 18 #Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 #Javascript
Javascript实现倒计时时差效果
May 18 #Javascript
vue-cli webpack 开发环境跨域详解
May 18 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python创建关联数组(字典)的方法
2015/05/04 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
this关键字的作用
2016/01/30 面试题
心理咨询专业自荐信
2014/07/07 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
2015年中个人总结范文
2015/03/10 职场文书