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 相关文章推荐
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
jquery的live使用注意事项
Feb 18 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
常用的js方法合集
Mar 10 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
详解jenkins自动化部署vue
May 14 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Django实现学生管理系统
2019/02/26 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python API len函数操作过程解析
2020/03/05 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
如何提高JDBC的性能
2013/04/30 面试题
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
简历的个人自我评价范文
2014/01/03 职场文书
预备党员表决心书
2014/03/11 职场文书
促销活动总结
2014/04/28 职场文书
学生干部培训方案
2014/06/12 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
个人总结格式范文
2015/03/09 职场文书
六年级数学教学反思
2016/02/16 职场文书