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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
给Javascript数组插入一条记录的代码
Aug 30 Javascript
Extjs学习笔记之七 布局
Jan 08 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
javascript基本语法分析说明
2008/06/15 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python中的并发编程实例
2014/07/07 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
使用Python 统计高频字数的方法
2019/01/31 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
演讲稿怎么写
2014/01/07 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
小学生环保标语
2014/06/13 职场文书
护士实习求职信
2014/06/22 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
JS中如何优雅的使用async await详解
2021/10/05 Javascript
Vue的生命周期一起来看看
2022/02/24 Vue.js