JQuery Mobile实现动态下拉框代码


JSP页面代码:

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${sysTitle}</title>
<link rel="stylesheet"
	href="./resource/jqm1.2/css/themes/default/jquery.mobile-1.2.0.min.css">
<link rel="stylesheet" href="./resource/jqm1.2/css/jqm-docs.css">
<script src="./resource/jqm1.2/js/jquery.js"></script>
<script src="./resource/jqm1.2/js/jquery.mobile-1.2.0.min.js"></script>
<script src="./campus/wap/js/rttopHtml5.base.js" type="text/javascript"></script>
<script src="./campus/wap/js/include.js" type="text/javascript"></script>
<script src="./campus/wap/js/sterminus.js" type="text/javascript"></script>

</head>

<body>
	<div data-role="page" id="sterminus_index">
		<div data-role="header" data-theme="c" data-position="fixed">

			<a href="#" id="btnbackIndex" data-role="button" data-icon="arrow-l">返回</a>
			<h4>${itemname}</h4>

		</div>
		<div data-role="content">
			<form method="post"  
				id="terminusform">
				<span>终端名称:</span>
				<input name="phonemodels" id="phonemodels" type="text"  />
				<span>IME号:</span>
				<input name="imeinumber" id="imeinumber" type="text" /> 
				
				<span>代办商:</span>
				<select id="agent" name="agent">
					<!-- <option value="1" selected>海科</option>
					<option value="2">海科2</option> -->
				</select> 
				<span>手机号码:</span>
				<input name="cmobile" id="cmobile" type="text"  />
				<span>客户姓名:</span>
				<input name="cname" id="cname" type="text" /> 
				<span>性别:</span>
				<select id="sex" name="sex">
					<option value="1" selected>男</option>
					<option value="2">女</option>
				</select> 
				<span>身份证号:</span>
				<input name="ccardnum" id="ccardnum" type="text" />
				<span>生日:</span>
			    <input id="cbirth" name="cbirth"  type="text">
			    <font color="red">格式为:yyyy-mm-dd 如:2013-10-10</font><br />
				<span>家庭住址:</span>
				<input name="chomeaddr" id="chomeaddr" type="text" />
				<div class="ui-grid-a">
					<div class="ui-block-a">
						<a data-role="button" id="btnsubmit" data-theme="C">保存</a>
					</div>
					<div class="ui-block-b">
						<a data-role="button" id="btncanel" data-theme="e">重置</a>
					</div>
				</div>
			</form>
		</div>
		<div data-role="footer" data-theme="c" data-position="fixed">
			<h1>
				<font size="2px">${copyRight}</font>
			</h1>
		</div>
	</div>

</body>
</html>

JS代码:

//营销活动办理信息录入页面创建事件
$('#sterminus_index').live("pagecreate", function() {
	 //返回
	   $(this).delegate('#btnbackIndex', 'click', function(e) {
		   window.location.href = "windex.do?reqCode=indexInit";
	     });
	   
	 //动态绑定值到代办商
	   $.ajax({ 
		   type:"post", 
		   url:"windex.do?reqCode=mobileagentDataLoad", 
		   data:"", 
		   success:function(data) {
		   var map =  eval("("+data+")"); 
			   $.each(map,function(key,value){
				   var code = value.code;
				   //alert(code);
				   var codedesc=value.codedesc;
				   
			   $("<option value="+code+">"+codedesc+"</option>").appendTo("#agent"); 
			   		} 
			   );  
		   	} 
		   }); 
	   
	 //保存
	   $("#btnsubmit").bind("click", function() {
		   var phonemodels = document.getElementById('phonemodels').value;
		   var imeinumber = document.getElementById('imeinumber').value;
		   var agent = document.getElementById('agent').value;
		   var cmobile = document.getElementById('cmobile').value;
		   var cname=document.getElementById('cname').value;
		   var ccardnum=document.getElementById('ccardnum').value;
		   var cbirth=document.getElementById('cbirth').value;
		   var sex=document.getElementById('sex').value;
		   var chomeaddr=document.getElementById('chomeaddr').value;
	       
		   if (phonemodels == "" || imeinumber == "" || cmobile == "" || cname == "" || ccardnum == "" || cbirth == "" || chomeaddr == "") {
               alert("请填写完整数据!");
               return;
           }

		   if (!checkRQ(cbirth)) {
               alert("生日的日期格式输入有误,请核对!格式为:yyyy-mm-dd 如:2013-10-10");
               document.getElementById('cbirth').focus();
               return;
           }
		  
		   $.ajax({

               type: "POST",
               url: "windex.do?reqCode=saveTerminusByMobilePhone",
               data: $("form#terminusform").serialize(),
               success: function(d){
               var r= $.parseJSON(d);
               var msg=r.msg;
   	           
   	           if(r.success==true)
   	        	   alert(msg);
		   	       $('#phonemodels').val('');
		 		   $('#imeinumber').val('');
	   	           $('#cmobile').val('');
	   	           $('#cname').val('');
	   	           $('#ccardnum').val('');
	   	           $('#cbirth').val('');
	   	           $('#chomeaddr').val('');
		 	},
               error:function(d){
                   var r= $.parseJSON(d);
                   var msg=r.data;
            	   alert(msg);
					//alert("网络无法连接服务器");
				}
           
		   });
		  
	     });
	   //取消
	   $("#btncanel").bind("click", function() {
		   $('#phonemodels').val('');
		   $('#imeinumber').val('');
		   $('#cmobile').val('');
		   $('#cname').val('');
		   $('#ccardnum').val('');
		   $('#cbirth').val('');
		   $('#chomeaddr').val('');
	     });
	  
});
action代码:

/**
	 * 代办商信息加载
	 * 
	 * @param
	 * @return
	 */
	@SuppressWarnings({ "unchecked", "rawtypes" })
	public ActionForward mobileagentDataLoad(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		Dto dto = new BaseDto();
		Dto outDto = new BaseDto();
		String field = "MOBILEAGENT";
		String fieldname = "移动代办商类型";
		dto.put("field", field);
		dto.put("fieldname", fieldname);

		List list = g4Reader.queryForList(
				"WapData.queryMobileAgentData", dto);
		outDto.put("jsonString", JsonHelper.encodeObject2Json(list));
		write(outDto.getAsString("jsonString"), response);
		return mapping.findForward(null);
	}
IBatis代码:

<!-- 查询-代办商信息 -->
	<select id="queryMobileAgentData" parameterClass="map" resultClass="dto"
		remapResults="true">
		select t.code,t.codedesc from eacode t where 1=1
		<dynamic>
			<isNotEmpty prepend="AND" property="field">
				t.field=#field#
			</isNotEmpty>
		</dynamic>
		<dynamic>
			<isNotEmpty prepend="AND" property="fieldname">
				t.fieldname=#fieldname#
			</isNotEmpty>
		</dynamic>
		  order by t.code
	</select>

效果图:










  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值