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);

猜你喜欢

转载自www.cnblogs.com/wmqiang/p/10543858.html