JQuery 输入框下拉框单选复选框控件的赋值与取值

56 阅读 0 评论 37 点赞

我是靠谱客的博主高高水池，最近开发中收集的这篇文章主要介绍JQuery 输入框下拉框单选复选框控件的赋值与取值，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1，输入框

<div class="div_h ">
     <label for="taskname" style="margin-left: 11px;margin-right: 39px;">名称</label>
     <input  id="taskname" type="text" name="taskname" class="bi-width140 form-control " value="${entity.taskname}"/>
     //value="${entity.taskname}"这是后端传过来的值
</div>

取值：var taskname = $("#taskname").val()

赋值：$("#taskname").val(name)
name是要传入进去的值

2，下拉框

前端

 <label for="costid" style="margin-left: 40px;margin-right: 11px;">成本方案</label>
     <select name="costid" id="costid" class="bi-width140 " value="${entity.costid}">
         <option value=""></option>
         <c:forEach items="${costlist}" var="item" varStatus="status">
             <option value="${item.id}">${item.planname}</option>
         </c:forEach>
     </select>

后端：

 List<CbhsDrctfanganInfEntity> cbhsDrctfanganInfEntities = cbhsDrctfanganInfEntityDao.findByCode(paraMap.get("faid"));
 model.addAttribute("costlist",cbhsDrctfanganInfEntities);

取值：var costid = $("#costid").val()

赋值：$("#costid").val(value)

3，单选

<div id="wrap">
	<input type="radio" name="zbstatus" value="0" />否
	<input type="radio" name="zbstatus" value="1" />是
</div>

取值：$('input:radio:checked').val()或$('input[name="zbstatus"]:checked').val()

赋值：$("#zbstatus").val(value)

获取一度组单选按知钮道对象：var obj_payPlatform = $(’#wrap input[name=“zbstatus”]’);
获取被选中按钮的值：var val_payPlatform = $(’#wrap input[name=“zbstatus”]:checked ').val();

补充链接：https://zhidao.baidu.com/question/588818927.html

4，复选框

前端

 <label style="padding:5px 10px 0px 20px;">方案</label>
    <select name="planname" id="planname"  class="easyui-combobox" style="width: 150px;height: 25px" data-options="multiple:true" onchange="FaBindhsDate()">
        <%--<option value=""></option>--%>
        <c:forEach items="${planlist}" var="item" varStatus="status">
            <option value="${item.id}">${item.planname}</option>
        </c:forEach>
    </select>

后端

 List<CbhsDrctfanganInfEntity> cbhsDrctfanganInfEntities = cbhsDrctfanganInfEntityDao.findByCode(paraMap.get("faid"));
 model.addAttribute("planlist",cbhsDrctfanganInfEntities);

取值：var orderstatus = $("#planname").combobox("getValues");

赋值：$("#planname").combobox("setValue",['赋值']);

监听事件：监听复选框中的值，并进行事件操作，此代码不可完全套用，只提供一种思路
补充链接：https://www.cnblogs.com/exmyth/p/4062793.html

$(document).ready(function () {
        $("#planname").combobox({
            onChange: function (n,o) {
                var plannames = $("#planname").combobox("getValues");
                //对复选中的字符串提取，加工操作
                var plannamestr ='';
                if (plannames&&plannames!='') {
                    var tmpStr='';
                    var arr = plannames.join(',').split(',');
                    for (var i = 0; i < arr.length; i++) {
                        if(arr[i]!=''){
                            if(tmpStr==''){
                                tmpStr=tmpStr+arr[i];
                            }else {
                                tmpStr=tmpStr+","+arr[i];
                            }
                        }
                    }
                    if(tmpStr!=''){
                        plannamestr =tmpStr;
                    }
                }
                
                var postdata ={
                    planname:plannamestr
                }
				//将值传入后台进行操作
                dLong.post("/cbhsHsunitTasklog/gethsdate",postdata,function(data){
                    if (data.success) {
                        var list= data.hslist;
                        var nr="";
                        for(var i = 0; i < list.length; i++) {
                            nr+= '<option value='+list[i].costdatatimeval+'>'+list[i].costdatatime+'</option>'
                        };
                        $("#hsdate").html(nr);//样式插入标签
                    }
                },true);
            }
        });
    });