1、Radio 改变值,后面的内容跟随变化
<div class="control-group">
<label class="control-label">形式</label>
<div class="controls">
<input type="radio" name="informWay" value="1" <c:if test="${dto.informWay eq 1}">checked</c:if> class="required" οnclick="clickInformWay();"/>X广播
<input type="radio" name="informWay" value="2" <c:if test="${dto.informWay eq 2}">checked</c:if> class="required" οnclick="clickInformWay();"/>Y广播
</div>
</div>
//形式 function clickInformWay(){ var informWay = $('input[name=informWay]:checked').val(); //X if(informWay==1){ } //Y else{ } } $(function(){ //形式默认值 var informWay = $('input[name="informWay"]:checked').val(); if(informWay==undefined){ $("input[name='informWay'][value=1]").attr("checked",true); } clickInformWay(); });
2、新增修改界面,select下拉选择项来源读取数据库数据
<div id="dlg" class="easyui-dialog" style="width: 600px; height: 300px; padding: 10px 20px" closed="true" buttons="#dlg-buttons">
<form id="fm" method="post" novalidate>
<table class="edit">
<tr><th width="35%">图文消息的标题:</th><td style="padding-left: 10px;" width="65%"><input name="title" id="title" class="easyui-textbox" required="true" size="40" /></td></tr>
<tr><th>图文消息页面的内容:</th><td style="padding-left: 10px;">
<textarea rows="5" cols="41" name="content" id="content"></textarea></td></tr>
<tr><th>图文消息缩略图的唯一标识:</th><td style="padding-left: 10px;">
<select id="thumb_media_id" name="thumb_media_id"></select><label style="padding-left: 5px"><font>(说明:来源“素材管理”)</font></label>
</td></tr>
</table>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" οnclick="saveEdit()" style="width: 90px">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')" style="width: 90px">取消</a>
</div>
</form>
</div>
function findThumbMediaIdList() { var obj = $("#thumb_media_id"); $.ajax({ type: "POST", dataType: "json", url: "${ctx}/admin/wxMediaNews/findThumbMediaIdList", success: function (data) { obj.empty(); $.each(data, function (i, n) { $("<option value=" + n.media_id + ">" + n.title + "</option>").appendTo(obj); }); } }); }
public void findThumbMediaIdList(){
List<WxMaterial> list = WxMaterial.dao.findAll();
renderJson(list);
}
其它关联代码:
$(function(){ findThumbMediaIdList(); }); 保存: var thumb_media_id = $('select[name="thumb_media_id"]').val(); if(thumb_media_id==null){ alert('图文消息缩略图的唯一标识必选!'); return; }
4、多选
JSP1:
<c:choose>
<c:when test="${platform eq 0}">
<div class="control-group" flag="package">
<label class="control-label"><h4>Android</h4></label>
</div>
<div class="control-group" flag="package">
<label class="control-label">Android版本</label>
<div class="controls" id="versionContainerId">
<table><tr><td>
<select name="wayType" id="wayType" οnchange="waytypechange();">
<option value="1" <c:if test="${dto.wayType eq '1'}">selected</c:if>>全部版本</option>
<option value="2" <c:if test="${dto.wayType eq '2'}">selected</c:if>>精确版本</option>
<option value="3" <c:if test="${dto.wayType eq '3'}">selected</c:if>>范围版本</option>
</select>
</td><td>
<div id="versionContainerId_exact">
<input type="hidden" name="exactVers" id="exactVers" value="${dto.exactVers }">
<select id ="exact_vers" multiple="multiple" name="exact_vers" size="5">
<c:forEach items="${versions }" var="ver" varStatus="verStat">
<option value="${ver.platVer }"
<c:forEach items="${dto.amsAppPlatformVersions }" var="platformVersion">
<c:if test="${ver.platVer eq platformVersion.platVer }"> selected="selected" </c:if>
</c:forEach>
>${ver.platVer }</option>
</c:forEach>
</select>
</div>
</td><td>
<div id="versionContainerId_range">
<table><tr><td>
<select id="rangeVer" name="rangeVer">
<c:forEach items="${versions }" var="ver" varStatus="verStat">
<option value="${ver.platVer }" <c:if test="${ver.platVer eq dto.rangeVer}">selected</c:if> >${ver.platVer }</option>
</c:forEach>
</select>
</td><td>
<select id="rangeUpdo" name="rangeUpdo">
<option value="1" <c:if test="${dto.rangeUpdo eq '1'}">selected</c:if> >以上(含)</option>
<option value="2" <c:if test="${dto.rangeUpdo eq '2'}">selected</c:if> >以下(不含)</option>
</select>
</td></tr></table>
</div>
</td>
<td><label for="versionContainerId" class="error" style="display: none;">必选字段</label></td>
</tr>
</table>
</div>
</div>
</c:when>
<c:otherwise>
</c:otherwise>
</c:choose>
JS1:
$("#exact_vers").multiselect({ noneSelectedText: "==请选择==", checkAllText: "全选", uncheckAllText: '全不选', selectedList:4 }); $('#versionContainerId_exact').hide(); $('#versionContainerId_range').hide(); waytypechange();
JS2:
function waytypechange(){ var waytype = $('#wayType').val(); if(waytype=='2'){ $('#versionContainerId_exact').show(); $('#versionContainerId_range').hide(); $(".ui-multiselect").show(); }else if(waytype=='3'){ $('#versionContainerId_exact').hide(); $('#versionContainerId_range').show(); $(".ui-multiselect").hide(); }else{ $('#versionContainerId_exact').hide(); $('#versionContainerId_range').hide(); $(".ui-multiselect").hide(); } }导入JS:
<!-- multiselect -->
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery/mutiselect/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery/mutiselect/assets/style.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery/mutiselect/assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery/mutiselect/ui/jquery-ui.css" />
<script type="text/javascript" src="${ctx}/resources/js/jquery/mutiselect/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery/mutiselect/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery/mutiselect/assets/prettify.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery/mutiselect/jquery.multiselect.js"></script>