您的位置：首页 > Web前端 > JQuery

JQuery Mobile实现动态下拉框代码

2013-11-06 10:30 302 查看

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>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery mobile 动态下拉框

相关文章推荐

新的分享

章节导航