Jquery与EasyUI表单交互：赋值与获取值的JavaScript源码示例

本文主要探讨如何使用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库，并理解每个组件的数据选项，这将有助于实现更复杂的前端交互功能。