Jquery与EasyUI表单交互:赋值与获取值的JavaScript源码示例
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
本文主要探讨如何使用JavaScript和jQuery在EasyUI框架下对表单元素进行赋值和获取值的操作,包括Input、ComboBox等组件的处理方法。 在EasyUI中,我们经常需要对表单元素进行操作,比如设置初始值或在用户交互后获取输入的值。以下是一些关于如何实现这一目标的示例代码和解释: 1. 对于一个简单的Input(如Inputa.validatebox): ```html <input type="text" name="APPLYDEPTNAME" id="APPLYDEPTNAME" style="width:99%" maxlength="50" class="easyui-validatebox" data-options="required:true" /> ``` 赋值可以使用jQuery的`.val()`方法: ```javascript $("#APPLYDEPTNAME").val('1212'); ``` 获取值同样使用`.val()`: ```javascript var value = $("#APPLYDEPTNAME").val(); ``` 2. 对于ComboBox(例如城市选择): ```html <!-- City ComboBox --> <input id="city" style="width:80px" class="easyui-combobox" data-options="valueField:'CityAreaCode',textField:'CityAreaName',url:'../../Ajax/InforService.ashx?Method=GetCity',onSelect:function(rec){...}}"/> <!-- Area ComboBox --> <input id="area" class="easyui-combobox" data-options="valueField:'CityAreaCode',textField:'CityAreaName'" /> ``` 选择城市后的区域联动,通过`onSelect`事件重新加载数据: ```javascript var url = '../../Ajax/InforService.ashx?Method=GetArea&CityAreaCode=' + rec.CityAreaCode; $('#area').combobox('reload', url); $('#area').combobox('setValues', ''); ``` 获取ComboBox的值可以使用`combobox('getValues')`: ```javascript var cityValues = $("#city").combobox("getValues"); var areaValues = $("#area").combobox("getValues"); ``` 3. 对于另一个Input(例如地址输入框): ```html <input type="text" value="" onchange="doValue(this.value)" style="width:45%" name="SC001_APPLYDEPTADDRESS" maxlength="23" class="easyui-validatebox" id="SC001_APPLYDEPTADDRESS" data-options="required:true" /> ``` 这里的`onchange`事件触发自定义函数`doValue`,可以用来处理输入的值。 总结一下,EasyUI中的表单元素赋值和获取值通常通过jQuery的`.val()`方法来实现,对于ComboBox这类复杂控件,需要使用特定的EasyUI方法,如`combobox('reload')`来刷新数据,`combobox('setValues')`来设置值,以及`combobox('getValues')`来获取已选择的值。确保正确引用jQuery和EasyUI库,并理解每个组件的数据选项,这将有助于实现更复杂的前端交互功能。
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/ac8b9680820940e7ac9d0c7be554f725_weixin_44609920.jpg!1)
- 粉丝: 243
- 资源: 1940
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Hadoop生态系统与MapReduce详解
- MDS系列三相整流桥模块技术规格与特性
- MFC编程:指针与句柄获取全面解析
- LM06:多模4G高速数据模块,支持GSM至TD-LTE
- 使用Gradle与Nexus构建私有仓库
- JAVA编程规范指南:命名规则与文件样式
- EMC VNX5500 存储系统日常维护指南
- 大数据驱动的互联网用户体验深度管理策略
- 改进型Booth算法:32位浮点阵列乘法器的高速设计与算法比较
- H3CNE网络认证重点知识整理
- Linux环境下MongoDB的详细安装教程
- 压缩文法的等价变换与多余规则删除
- BRMS入门指南:JBOSS安装与基础操作详解
- Win7环境下Android开发环境配置全攻略
- SHT10 C语言程序与LCD1602显示实例及精度校准
- 反垃圾邮件技术:现状与前景
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)