input/radio/select等标签的值获取和赋值
2024-08-25 05:12:03
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);
最新文章
- oracle merge into用法
- POJ 1459:Power Network(最大流)
- OriDomi – 像折叠纸张一样折叠 DOM 元素
- 小白学Linux(四)--系统常用命令
- IIS7上设置MIME让其支持android和Iphone的更新下载
- combox绑定后添加自定义列
- CSS设置图片垂直居中的方法
- rsync命令(同步/备份数据)
- Google Web Designer 测试
- IOS开发环境更换后重新制作Provisioning Profile证书详解
- Uber司机一周体验记:成单率仅57%
- Android(Lollipop/5.0) Material Design(六) 自定义动画
- UML和模式应用学习笔记-1(面向对象分析和设计)
- Python基础学习8---list列表的操作
- VS中Release模式下生成去掉生成pdb文件
- (三)ajax请求不同源之jsonp跨域
- Redis的使用原理
- K/3 Cloud移动BOS开发技巧 -- K/3 Cloud多数据中心时如何支持发布到云之家.
- Unicode 是不是只有两个字节,为什么能表示超过 65536 个字符
- 理解、学习与使用 JAVA 中的 OPTIONAL<;转>;
热门文章
- iOS开发-数据存储NSCoder
- /etc/vim/vimrc的一个的配置
- [转]Android MediaPlayer状态机
- Python中常用包——sklearn主要模块和基本使用方法
- The end of the world
- JNUOJ 1184 - 科学计数法
- CCCC L2 部落 L3社交集群
- Cloudrea manager5安装CDH5文档
- Oracle备份恢复之热备份恢复及异机恢复
- 对爱奇艺PC Web主站来说,良好的SEO能够帮助其获得更多的搜索流量,因而页面上一些非常重要的内容仍然需要依靠服务端进行渲染,由于另外开发一套基于Node的SSR后台成本较高,而乐趣(基于java和velocity模板引擎)平台作为渲染系统已经十分成熟且运行稳定,在充分试验后,我们决定在Uniqy中使用服务端同步与客户端浏览器异步二次渲染相结合的方式,结合Vue2.0提供的 slot插槽机制,很