input/radio/select等标签的值获取和赋值
input/radio/select等标签的值获取和赋值,这几个是使用率最高的几个标签,获取值和赋值以及初始化自动填充数据和选择:
页面html:
<div class=" ">
<label>统一社会信用代码</label> <input type="text" id="legalcreditcode"
name="legalcreditcode" placeholder="统一社会信用代码" />
</div> <div class=" ">
<label>项目法人类型</label> <select name="projectLegalType" id="projectLegalType"
class="optionlist"></select>
</div>
<div class="">
<label class="">是否重大项目</label>
<div style="float: left;">
<input type="radio" value="1" name="isMajorProject"
style="margin-left: 5px;" /><span
style="font-size: 14px; text-align: center; line-height: 30px; margin-left: 5px;">是</span>
</div>
<div style="margin-left: 30px; float: left;">
<input type="radio" value="0" name="isMajorProject"
checked="checked" style="" /><span
style="font-size: 14px; text-align: center; line-height: 30px; margin-left: 5px;">否</span>
</div>
</div>
其中select下拉列表有涉及到mustache模板赋值所有的下拉选项;
几个标签值获取:
$(".submit").on("click", function() {
// 获取页面填写得数据
var paras = {};
//function(index, $el)遍历元素设为变量$el
// jquery的封装方法,$.each遍历指定的标签取值,和paras[$el.id]方法,获取到所取的元素的id属性的值,el.value获取所取的元素的value值,
// 所取到的paras键值对的格式,键就是页面每个标签的id属性的值,后台也根据这个键名获取到对应的值
//对应含有class属性的标签下的input标签
$.each($(".form-group input"), function(index, $el) {
paras[$el.id] = $el.value;
});
$.each($(".form-group2 input"), function(index, $el) {
paras[$el.id] = $el.value;
});
//对应含有class属性的标签下的textarea标签
$.each($(".form-group2 textarea"), function(index, $el) {
paras[$el.id] = $el.value;
});
//对应含有class属性的标签下的select标签
$.each($(".form-group select"), function(index, $el) {
paras[$el.id] = $el.value;
});
$.each($(".form-group2 select"), function(index, $el) {
paras[$el.id] = $el.value;
});
// radio类型的控件获取所选的值
paras["isMajorProject"] = $("input[name=isMajorProject]:checked").val();
// 也可以数组慢慢手动赋值键值对,通过ajax请求交互传回到后台
var urlphaseGuid = Util.getUrlParams('phaseguid');
var urlbiguid = Util.getUrlParams('biguid');
paras["urlphaseGuid"] = urlphaseGuid;
paras["urlbiguid"] = urlbiguid;
if (!isEmpty(urlbiguid)) {
Util.ajax({
url : projectController.submitProject,
data : paras,
success : function(data) {
//layer组件进行一些友好提示,提升用户体验
layer.open({
type : 1,
skin : 'layui-layer-approve', // 样式类名
closeBtn : 0, // 不显示关闭按钮
anim : 2,
title : '',
shadeClose : false, // 开启遮罩关闭
area : [ '350px', '210px' ],
content : $("#submit-tmpl").html(),
success : function() {
$(".continue").on("click", function() {
window.location.href = rooturl + "/xxx/pages/xxx/projectdetail.html";
})
}
});
}
})
}
})
几个标签赋值或初始化自动填充:
// input标签赋值
$('#legalcreditcode').val(itemBaseinfo.itemlegalcerttype);
// select标签赋值同input标签赋值
$('#projectLegalType').val(itemBaseinfo.itemlegalcertnum);
// 是否重大项目radio赋值
$("input[name='isMajorProject'][value="+itemBaseinfoExtend.ismajorproject+"]").attr('checked',true);
input/radio/select等标签的值获取和赋值的更多相关文章
- 总结:如何获取同一个DIV里的多个不同子标签的值,并赋值给input?
这个问题说起来简单,但对于新手来说,也着实卡了好久,并且我在网上搜了好久没能找到合适的答案, 于是去博问问了一下,得到许多大神们的帮助与回答,接下来我就总结一下能够实现这个效果的几种方法,既为了自己更 ...
- 遍历input。select option 选中的值
<label> <input name="Fruit" type="radio" value="0" class=&quo ...
- 让innerHTML获取的内容包含input和select(option)的最新值
function refreshData(){ var allInputObject=document.body.getElementsByTagName("input"); fo ...
- 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容
一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...
- Jquery 获取 radio/select选中值
Radio <input type="radio" name="rd" id="rd1" checked="checked& ...
- 获取或设置checkbox radio select的值
单选: 获取值:$("input[name='rdo']:checked").val(); 设置值:$("input[name='rdo'][value='3']&quo ...
- 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值
随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...
- jquery 获取input radio/checkbox 的值 【注意写法】
今天,在用jquery获取页面上radio值的时候,radio给出了默认值,但是无论如何修改值,radio始终是默认值,去掉默认值的时候,页面上又报出了undefined的错误.经过几番搜索,发现不同 ...
- JS实现选择不同select标签option值的验证
js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...
随机推荐
- Xcode - xcode-select: error: tool 'xcodebuild' requires Xcode报错解决方案
用mac 自带的终端执行的命令,安装安装Vapor和toolbox 安装指令: macdeMacBook-Pro:~ mac$ curl -sL check.vapor.sh| bash 结果报这个错 ...
- mysql导入存储过程
查询数据库存储过程 select `name` from mysql.proc where db = 'databaseName' and `type` = 'PROCEDURE'; mariadb操 ...
- 阿里云liunx-ubuntu安装中文
ubuntu安装中文支持--让你的ub真正变成中文作者: 来源:ubuntu在安装的时候会提示选择语言,但选择了中文之后,系统里面还有很多英文并不是ub对中文支持不好 你根本就没有安装中文支持~ 首先 ...
- POJ - 1054 The Troublesome Frog 模拟 枚举优化。
题意:有个R*C的格网.上面有若干个点,这些点可以连成一些直线,满足:这些点在直线上均匀排布(也就是间隔相等),直线的两段穿过网格(也就是第一个,最后一个在网格的边界附近) 求某条直线上最多的点数 题 ...
- xp上使用vsphere client报错问题
出现该问题的原因是新版本的esxi和vcenter中增强了加密强度,而Windows XP和Windows Server 2003未能达到所需加密强度,client发起的链接被esxi和vcenter ...
- mongostat和mongotop对mongodb数据库运行状态进行监控
--mongostat工具是mongdb自带的监控工具,可以用来监控mongodb当前状态下的运行情况: [root@slave2 ~]# /usr/local/mongodb341/bin/mong ...
- cocoapods卸载与安装
引用自:https://www.aliyun.com/jiaocheng/389907.html 一.首先卸载pod which pod 得到pod的路径 sudo rm -rf <pod的路径 ...
- JS和webView的交互
JSContext的交互方式最为简单快捷: 1.申明一个JSContext对象 self.jsRunner = [[JSContext alloc] init]; 2.在原生中定义申明一个JS函数方法 ...
- wampserver 权限配置
当你按照网上以前介绍的wamp配制方法,安装好wamp后.本地的locallhost和127.0.0.1一切都正常,他们都能对你本地的网页文件进行访问.这里说一说,手机借助wamp访问本地文件的方法. ...
- vueawesomeswiper自定义 导航点
1,pagination的配置 pagination: { el: '.swiper-paginationfull', // type:'bullets', // bulletElement : 's ...