前台页面 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-2.1.4.min.js"></script> <script type="text/javascript"> //保存前获取页面的新增信息 function save(){ var rows=$("#tab tr"); if(rows.length>5){ alert("最多只能添加五个顾客!"); return false; }else{ var data=getTableData("tab"); if(""!=$.trim(JSON.stringify(data))){ $("#jsonStr").val(JSON.stringify(data)); document.forms[0].submit(); } return true; } } function getTableData(tableId){ var rows=$("#" + tableId +" tr"); var data = "["; //定义数据变量 for(var i=1;i<rows.length;i++){ var user="{"; //定义数据变量 rows.eq(i).find("input").each(function(){//遍历表格中的input等标签 if($(this).attr("name")){ //如果此标签设置了name,则取出其中数据 user += "\"" + $(this).attr("name") + "\":\"" + $(this).val() + "\","; //拼接id和数据 } }); if(user.length != 1){ //如果取出了数据,删除多余的符号 user = user.substring(0, user.length-1); //删除多余的符号',' } user += "}"; if(i<rows.length-1) user += ","; data += user; } data += "]"; alert(data); data = eval("(" + data + ")"); //将数据转换成json对象 return data; //返回数据 } var i =0; var options=""; $.ajax({ type: "POST", url: "yhtcid.do", dataType: "text", success: function(data){ options=$.trim(data); } }); //通过Jquery新增一行 $(document).ready(function() { $("#newBtn").bind("click", function(){ var rows=$("#tab tr"); if(rows.length>5){ alert("最多只能添加五个顾客!"); return false; }else{ var trHtml="<tr><td><input style=\"text-align:left; \" id=\"allCkb\" type=\"checkbox\" value=\checkbox"+ i +"\" /></td>"+ "<td><input style=\"text-align: center; width: 100%;\" id=\"name_"+ i +"\" name=\"name\" type=\"text\" /></td>"+ "<td><input style=\"text-align: center; width: 100%;\" id=\"age_"+ i +"\" name=\"age\" type=\"text\" /></td>"+ "<td><input style=\"text-align: center; width: 100%;\" id=\"sex_"+ i +"\" name=\"sex\" type=\"hidden\" value=\"1\"/>"+ "<select style=\"text-align: center;\" id=\"selectsex_"+ i +"\" onchange=\"dsex("+i+")\" ><option value =\"1\">男</option> <option value =\"2\">女</option></select></td>"+ "<td><input style=\"text-align: center; width: 100%;\" id=\"phone_"+ i +"\" name=\"phone\" type=\"text\" onblur=\"checkSubmitMobil("+i+")\"/></td>"+ "<td><input style=\"text-align: center; width: 100%;\" id=\"card_"+ i +"\" name=\"card\" type=\"text\" onblur=\"isCardNo("+i+")\"/></td>"+ "<td><input style=\"text-align: center; width: 100%;\" id=\"email_"+ i +"\" name=\"email\" type=\"text\" onblur=\"checkSubmitemail("+i+")\"/></td>"+ "<div style=\"text-align: center; width:140px;\"><td><input style=\"text-align: center; width: 10px;\" id=\"pname_"+ i +"\" name=\"pname\" type=\"hidden\" value=\"1001\" onblur=\"save()\"/>"+ "<select id=\"selectID_"+ i +"\" style=\"text-align: center; width: 80px;\" onchange=\"dpanme("+i+")\" >"+options+"</select> /"+ " <input style=\"text-align: center; width: 50px; border-top:0px ; border-left:0px ; border-right:0px ;\" id=\"price_"+ i +"\" type=\"text\" value=\"1000\" readonly=\"readonly\" /></td></tr>" $("#tab").append(trHtml); i ++ ; return true; } }); //通过Jquery删除一行 $("#delBtn").bind("click", function(){ if($('#allCkb').is(':checked')){ if (confirm("你确定删除吗?")) { $("#tab tr:not(:first)").empty(); $('span').text('全选'); $("#Checkbox").attr("checked",false); } }else{ alert("请选择要删除的数据!"); } }); }); function dpanme(i){ var selectValue = $("#selectID_"+i).val(); $("#pname_" + i).val(selectValue); $.ajax({ type:"POST", url:"price.do", dataType: "text", data:{"id":selectValue}, success:function(str){ $("#price_"+i).val(str); } }); } function dsex(i){ var selectValue = $("#selectsex_"+i).val(); $("#sex_" + i).val(selectValue); } function check(){ if ($("#Checkbox").prop("checked") ) {//全选 $("input[name='allCkb']").prop("checked", true); $('span').text('取消全选'); } else { $("input[name='allCkb']").prop("checked", false); $('span').text('全选'); } } </script> <body> <form action ="addUser.do" method="post" onsubmit="return save();"> <h3 align="center">新增旅游人员信息</h3> <input name="jsonStr" id="jsonStr" type="hidden"> <table id="tab" align="center" border="1" cellpadding="0" cellspacing="0" width="90%"> <tr> <td width="5%" align="left"><input id="Checkbox" type="checkbox" onclick="check()" /><span>全选</span></td> <td width="10%" align="center">姓名</td> <td width="10%" align="center">年龄</td> <td width="5%" align="center">性别</td> <td width="10%" align="center">联系电话</td> <td width="10%" align="center">***</td> <td width="10%" align="center">电子邮箱</td> <td width="10%" align="center">套餐名/价格</td> </tr> </table> <p style="text-align:center"> <input type="button" id="newBtn" value="新增行" /> <input type="button" id="delBtn" value="删除行" /> <input class="button" type="submit" value="暂存" /> </p> </form> </body> </html> 后台代码 @RequestMapping("yhtcid") public @ResponseBody void yhtcid(HttpServletResponse response) throws IOException{ List<Yhtc> list=yhtcservice.getAll(); String str=""; response.setContentType("text/html;charset=utf-8"); for(int i=0;i<list.size();i++){ str+="<option value='"+list.get(i).getId()+"'>"+list.get(i).getPname()+"</option>"; } PrintWriter out = response.getWriter(); out.print(str); }
Jquery 解析返回的Json,然后写入select下拉框
精选 转载
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Jquery 结合Json控制Select下拉框
[代码]
jQuery javascript html jquery i++ -
用jQuery模拟select下拉框
很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找,又重新发明轮子鸟:)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "://.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
jQuery select javascript html jquery