js表单快速取值/赋值 快速生成下拉框
1.表单取值/赋值公共方法
//表单序列化:文本框的name字段和数据源一致<form id="myForm" onsubmit="return false;">
function getFormJsonData(formId) {
var fields = $("#" + formId).serializeArray();
var f = {};
$.each(fields, function (index, field) {
f[field.name] = field.value;
})
return f;
}
//表单填充数据:文本框的name字段和数据源一致
function setFormJsonData(data) {
if (data) {
for (var i in data) {
////console.log(i + ":" + data.JingShenBing[i]);
if (document.getElementsByName(i + "").length > 0) {
document.getElementsByName(i + "")[0].value = data[i];
} }
} }
2.调用
<form id="form2" name="form2" onsubmit="return false">
<input name="name" />
<input name="age" />
<input value="提交" type="button" onclick="getFormData()" />
<input value="setValue" type="button" onclick="setFormData()" />
</form>
<script>function getFormData() {
var data = getFormJsonData("form2");
data.id = 1; //追加数据
var data1={sex:'0'};
Object.assign(data1, data); //copy复制对象
console.log(data1);
}
function setFormData() {
var data = {"name":"jay","age":"22"};
setFormJsonData(data);
}
</script>
3.生成下拉框
//调用:createSelect("url","Name","Id","selectId",-1, [{"Name":"全部","Id":"-1"}],null);
//参数:数据源地址,显示字段,取值字段,下拉框id,默认选中值,开头追加数据,成功回调
function createSelect(url,displayField,valueField,selectId, defaultValue, insertDataAtFirst, cb) {
try {
var obj = document.getElementById(selectId);
//var url = obj.getAttribute("attr-url");
//var displayField = obj.getAttribute("attr-displayField");
//var valueField = obj.getAttribute("attr-valueField"); ////alert(displayField);
var str = "";
if (insertDataAtFirst) {
for (var i = 0; i < insertDataAtFirst.length; i++) {
var item = insertDataAtFirst[i];
////console.log("option:", item[displayField]);
str += "<option value='" + item[valueField] + "' >" + item[displayField] + "</option>";
}
}
ajax(url, null, function (data) {
if (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
////console.log("option:", item[displayField]);
str += "<option value='" + item[valueField] + "'>" + item[displayField] + "</option>";
} }
obj.innerHTML = str;
if (defaultValue != null && defaultValue != "") {
obj.value = defaultValue;
} if (cb) {
cb(obj.value);
}
});
} catch (e) {
console.log('%c createSelect error:', 'background:white;color:red',e);
} }
调用:
//参数:数据源地址,显示字段,取值字段,下拉框id,默认选中值,开头追加数据,成功回调
createSelect("api/Dict/GetProvinces", "Name", "Id", "selProvince", -1, {Id:-1,Name:"请选择"}, null);
968AF3B3-37D5-4689-ACAB-9BB3D0F6BAD4 From:http://www.cnblogs.com/xuejianxiyang/p/8416527.html
js表单快速取值/赋值 快速生成下拉框的更多相关文章
- jQuery 表单元素取值与赋值方法总结
一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...
- Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单(取值、赋值、校验和是否可编辑等)
1.要使用Angular自带的表单控制需要先引入相关模块(.ts文件): import { FormGroup, //表单对象类 FormBuilder, //表单生成工具类 Validators} ...
- `<jsp:getProperty>`动作和`<jsp:setProperty>`动作的使用在一个静态页面填写图书的基本信息,页面信息提交给其他页面,并且在其页面显示。要去将表单元素的值赋值给Java
<jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作 语法格式: <jsp:get ...
- Dynamics 365-表单元素取值/赋值
取值/赋值 参考: 山人丶 提示: 查找类型赋值时需指定目标实体,记录名称及id值 时间和日期类型赋值时需赋值Date类型 //获取new_name的值(单行文本) Xrm.Page.getAttri ...
- 表id关联数据获取至页面,制作下拉框多选进行数据多项获取(字段处理)
这周完成了一张表单,重点碰到以下问题: 1.freemaker获取年份的type值取year,类型直接为Long,传至后台和获取数据不需要转换: 2.freemaker获取日期type值为date, ...
- [King.yue]Ext.JS 弹出窗体取值赋值
//从Grid取值 var name = Ext.getCmp(gridGridID).getView().getSelectionModel().getSelection()[0].data.Nam ...
- [Swift通天遁地]二、表格表单-(4)使用系统自带的下拉刷新控件,制作表格的下拉刷新效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- [Swift通天遁地]二、表格表单-(6)创建美观的表格弹性下拉刷新效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 解决select下拉框禁用(设置disabled属性),后台获取值为空
如果下拉框设置disabled属性后,提交表单到后台,后台获取的下拉框的值为空,以下有三种解决获取不到下拉框选项值的方法. 有下拉框html如:<select name="select ...
随机推荐
- python之类与对象(4)
5. 类的继承 继承可谓是重中之重,也是面向对象编程的核心内容之一.子类可以继承父类的属性以及方法.作为一名测试人员,学习了类之后,我们可以很好的把代码与数据分离开来,有了基本的封装思想.接下来我们将 ...
- mkvirtualenv创建python虚拟环境
为什么要创建虚拟环境呢? 如果在我们本地开发好几个项目,每个项目又用到很多第三方插件,如果没没用创建虚拟环境,那么本地项目插件就会很多很乱,如果有虚拟环境就不一样了 虚拟环境安装 pip instal ...
- 错误及异常处理-[PathTooLongException]指定的路径或文件名太长
错误信息 System.IO.PathTooLongException:"指定的路径或文件名太长,或者两者都太长.完全限定文件名必须少于 260 个字符,并且目录名必须少于 248 个字符. ...
- git常用安装包,指令
babel-polufill -es6 API转义 npm install --save @babel/polyfill babel-runtime -es语法转义 npm install --s ...
- js面向对象(二)——继承
上一篇随笔讲了封装,这一篇我们说说继承,还是那上一篇猫和狗说事儿 function Dog(name,s){ this.name=name; this.sex=s; } Dog.prototype.t ...
- overload_protect_config.txt
overload_protection_switch=Y reject_uri_list= reject_request_percent=50 period_time=10 period_max_fa ...
- JavaScript 刷题一
最近读<JavaScirpt编程精解>,想把里面的三个大的程序实现,现在记录下来. 问题一: 从下面这封信中,emily奶奶每封信的结尾都会用同样的格式注明哪只猫出生了,哪只猫死去了.现要 ...
- Cloudera Manager安装之Cloudera Manager 5.6.X安装(tar方式、rpm方式和yum方式) (Ubuntu14.04) (三)
见 Ubuntu14.04下完美安装cloudermanage多种方式(图文详解)(博主推荐) 欢迎大家,加入我的微信公众号:大数据躺过的坑 免费给分享 同时,大家可以关注我的个人 ...
- gcd函数两种实现(参考)
注意: %a= a%-----溢出 递归: #include<stdio.h> int gcd(m,n) { int g; ) g=m; else g=gcd(n,m%n) return ...
- 深入理解JavaScript系列(48):对象创建模式(下篇)
介绍 本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码. 模式6:函数语法糖 函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用pro ...