一、新增页面的渲染

（1）text与Texarea新增页面不需要初始化；

（2）对于radio、select、checkbox元素选项固定的情况也不做出说明；

（3）动态加载radio的枚举数值：

a、js方式

$.ajax({ 
        url:'${_baseUrl}/dd/getDatas', 
        type:'post', //数据发送方式 dataType:'json', //接受数据格式 data:{},
        async: false,
        success: function(data){for(var j=0;j<data.length;j++){
                    str += "<input type='radio' name='radioName' value='"+values[j].id+"'>";
                    str += "<span style='margin-left:10px'>"+values[j].name+"</span>";
                }
        },
        error:function(){layer.msg( "系统错误");
        }
  });

b、jstl方式

 <c:forEach var="item" items="${itemList}" varStatus="status"><input type="radio" name="radioName" value="+item.id+"><span style="margin-left:10px'>"+item.name+"</span>
 </c:forEach>

（4）checkbox同radio，不做特别说明

（5）select的初始化

a、js方式

先编写selec的html代码

<select name="dataName" id="dataId" onchange="setName(this)"></select>

然后初始化选项

$.ajax({ 
        url:'${_baseUrl}/dd/selectAllDatas', 
        type:'post', //数据发送方式 dataType:'json', //接受数据格式 data:{},
        async: false,
        success: function(data){$.each(data, function (i, item) {jQuery("#dataId").append("<option value="+ item.id+">"+ item.name+"</option>");
            }); 
           },
        error:function(){layer.msg( "系统错误");
        }
   });

b、jstl方式

<select name="dataName" id="dataId" onchange="setName(this)"><option value ="">请选择</option><c:forEach var="item" items="${itemList}" varStatus="status"><optionvalue ="${item.id }">${item.name}</option></c:forEach></select>

c、如果要获取选项的名称，在select下面添加

<input type="hidden" id="dataNameId" name="dataNameId" value="" />

每次select修改都把select的选项值赋给隐藏变量，可以传到后台

function setName(select){
    $("#"+select.id.replace("Id","Name")).val(select.selectedOptions[0].label);
}

二、修改页面的渲染及初始化值

js方式

（1）text和textarea赋值

$("#dataId").val(dataValue);

（2）radio赋值

$("input[type=radio][name='radioName'][value='"+radioValue+"']").attr('checked',true);

（3）checkbox赋值

$("input[type=checkbox][name=‘fieldName’]").each(function (index, item) {
   if(filedValue.indexOf($(this).val()) >= 0){
        $(this).prop('checked',true);
    }
});

（4）select赋值

$("#selectId option").each(function () { var txt = $(this).val();     if(txt == value){
         $(this).prop("selected","selected");
     }
});

jstl方式

（1）text和textarea赋值

<input type="text" name="dataName" id="dataId" value="${dataValue}"/>

<textarea name="dataName" id="dataId" >${dataValue}</textarea>

（2）radio赋值

radioValue为后台传到前台的数值，如果选项的value与后台传的值一致，则会被选中

<input type="radio" name="radioName" value="1" <c:if test="${radioValue == '1'}">checked="checked"</c:if>>开启
<input type="radio" name="radioName" value="0" <c:if test="${radioValue == '0'}">checked="checked"</c:if>>关闭

（3）checkbox赋值

用法同radio

<input type="checkbox" name="boxName" value="1" <c:if test="${boxValue == '1'}">checked="checked"</c:if>>开启
<input type="checkbox" name="boxName" value="0" <c:if test="${boxValue == '0'}">checked="checked"</c:if>>关闭

（4）select赋值

<select class="layout_table_select" name="selectId" id="selectId" ><option value ="">请选择</option> <c:forEach var="item" items="${itemList}"  varStatus="status"><c:choose><c:when test="${id eq item.id}"><option  value="${item.id}" selected="selected">${item.name}</option></c:when><c:otherwise><option  value="${item.id}">${item.name}</option></c:otherwise></c:choose> </c:forEach></select>

或者

<select class="layout_table_select" name="selectId" id="selectId" > <option  value="${id}">${name}</option> <c:forEach var="item" items="${itemList}"  varStatus="status"><c:when test="${id != item.id}"><option  value="${item.id}">${item.name}</option></c:otherwise> </c:forEach></select>

第一个optio为默认，把保存的值放在默认进行展示

三、新增和修改页面提交获取数值

（1）获取text和textarea的值

var value = $("#id").val();

（2）获取radio被选中的值

var value = $("input:radio:checked[name='radioName']").val();

(3)获取checkbox勾选的值

var vals = [];
$("input:checkbox:checked[name='boxName']").each(function (index, item) { vals.push($(this).val());
});
fvar value = vals.join(",");

（4）获取select的值

var value = $("#selectId option:selected").val();

到此结束，如有问题，请留言交流！

阅读更多