Easyui的组合框的取值与赋值


Posted in Javascript onOctober 28, 2016

近期由于工作需要,用户点击下拉框可以试下多选的效果,效果大致如下图:

Easyui的组合框的取值与赋值

实现的代码如下:

<select id="iweekDay" class="col-sm-4 form-control easyui-combobox " name="state" data-options="multiple:true,multiline:true" style="width:350px;height:35px" >
<option value="1">1</option>
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
</select>

最主要的是:multiple:true表示下拉框可以多选,如果单选:multiple:false单选

下面总结下combobox的取值与赋值

2、赋值

(1)单选赋值setValue

$('#Id').combobox('setValue','key')

(2)多选赋值setValues

多选key值是一个数组,$('#Id').combobox('setValues','key1,key2,key3'.split(','))

注意:'key1,key2,key3'.split(',')将字符串切分为数组,因为combobox的第二个参数是数组

3.取值

(1)单选取值getValue

$('#Id').combobox('getValue')

(2)多选取值getValues

多选key值是一个数组,$('#Id').combobox('getValues')

注意:取得的值是一个数组,如果想转换为以逗号分隔的字符串的话例如("1,2,3"),使用join方法,代码如下:

var str=$('#Id').combobox('getValues').join(",");

PS:下面看下easyui selectbox 赋值 取值的完整代码

赋值 取值

// Redefine the banner
var storeName_value = '@ViewBag.StoreName';
var department_value = '@ViewBag.Department';
var changeDate_value = '@ViewBag.ChangeDate';
$('#StoreName option:selected').text(storeName_value); 
$('#Department option:selected').text(department_value);
//$('#StoreName').combobox('setValue', storeName_value);
//$('#Department').combobox('setValue', department_value);
// bind searchBtn
$('#this_submit').bind('click', function () {
// var st = $('#StoreName option:selected').text().trim();
// var dep = $('#Department option:selected').text().trim();
var st = $('#StoreName').combobox('getValue');
var dep = $('#Department').combobox('getValue');
var changeDate = $('#datepicker').val();
var href = '../';
href += '&storeName=' + st + '&department=' + dep + '&changeDate=' + changeDate;
href += '&page=1&size=8';
window.location.href = href;
});

以上所述是小编给大家介绍的Easyui的组合框的取值与赋值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
layer插件select选中默认值的方法
Aug 14 Javascript
React事件处理的机制及原理
Dec 03 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
vue vant中picker组件的使用
Nov 03 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 #Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 #Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 #Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 #Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 #Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 #Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 #Javascript
You might like
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
python控制台显示时钟的示例
2014/02/24 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python numpy库np.percentile用法说明
2020/06/08 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
文秘求职信范文
2014/04/10 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
年度考核个人总结
2015/03/06 职场文书
2015年国培研修感言
2015/08/01 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers