input/radio/select等标签的值获取和赋值

时间:2023-03-09 16:38:13
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);