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等标签的值获取和赋值的更多相关文章

  1. 总结:如何获取同一个DIV里的多个不同子标签的值,并赋值给input?

    这个问题说起来简单,但对于新手来说,也着实卡了好久,并且我在网上搜了好久没能找到合适的答案, 于是去博问问了一下,得到许多大神们的帮助与回答,接下来我就总结一下能够实现这个效果的几种方法,既为了自己更 ...

  2. 遍历input。select option 选中的值

    <label> <input name="Fruit" type="radio" value="0" class=&quo ...

  3. 让innerHTML获取的内容包含input和select(option)的最新值

    function refreshData(){ var allInputObject=document.body.getElementsByTagName("input"); fo ...

  4. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  5. Jquery 获取 radio/select选中值

    Radio <input type="radio" name="rd" id="rd1" checked="checked& ...

  6. 获取或设置checkbox radio select的值

    单选: 获取值:$("input[name='rdo']:checked").val(); 设置值:$("input[name='rdo'][value='3']&quo ...

  7. 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值

    随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...

  8. jquery 获取input radio/checkbox 的值 【注意写法】

    今天,在用jquery获取页面上radio值的时候,radio给出了默认值,但是无论如何修改值,radio始终是默认值,去掉默认值的时候,页面上又报出了undefined的错误.经过几番搜索,发现不同 ...

  9. JS实现选择不同select标签option值的验证

    js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...

随机推荐

  1. [工具] Citavi – 文献管理软件(笔记记录)

    https://www.citavi.com/en/ 如果你有论文写作的需求,特别是对于科研人员.研究生来说,文献管理软件是不可或缺的.目前流行的文献管理软件有老牌的 EndNote,本土化的 Not ...

  2. [APP] Android 开发笔记 004-Android常用基本控件使用说明

    TextView 文本框 EditText控件 Button 与 ImageButton ImageView RadioButton CheckBox复选框 TextView 文本框 ,用于显示文本的 ...

  3. sklearn的快速使用

    传统的机器学习任务从开始到建模的一般流程是:获取数据 -> 数据预处理 -> 训练建模 -> 模型评估 -> 预测,分类.本文我们将依据传统机器学习的流程,看看在每一步流程中都 ...

  4. 【vue】---项目接口管理---【巷子】

    一.前言 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口 假设后端的文档分成了以下几个模块 1.发现模块 2.个人信息模块 3.商品模块 4.评论模块 ...... ...

  5. HTTP与HTTPS对访问速度(性能)的影响【转】

    1 前言 HTTPS 在保护用户隐私,防止流量劫持方面发挥着非常关键的作用,但与此同时,HTTPS 也会降低用户访问速度,增加网站服务器的计算资源消耗. 本文主要介绍 https 对用户体验的影响. ...

  6. OpenCV学习笔记之课后习题练习4-1

    第四章课后练习1 1.本章完整讲述了基本的输入/输出编程以及OpenCV的数据结构.下面的练习是基于前面的知识做一些应用,为后面大程序的实现提供帮助.a.创建一个程序实现以下功能:(1)从视频文件中读 ...

  7. Python的全局和局部变量

    global1 = " def o(): #global global1; global1=2; print(global1) def p(): print(global1) if __na ...

  8. Oracle体系结构之oracle密码文件管理

    密码文件 密码文件作用: 密码文件用于dba用户的登录认证. dba用户:具备sysdba和sysoper权限的用户,即oracle的sys和system用户. 本地登录: 1)操作系统认证: [or ...

  9. 20144306《网络对抗》MAL_免杀原理与实践

    一.基础问题回答 1.杀软是如何检测出恶意代码的? (1)特征码:类似于人的生物特征,恶意代码可能会包含一段或多端数据能代表其特征.杀软一般会对文件内容进行静态扫描,将文件内容与特征库进行匹配,来检测 ...

  10. MySQL(4):主从复制原理

    1.主从复制概述 MySQL主从复制也可以称为MySQL主从同步,它是构建数据库高可用集群架构的基础.它通过将一台主机的数据复制到其他一台或多台主机上,并重新应用relay log中的SQL语句来实现 ...