标签：function name 回显 list pid append 联动 var 三级
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="resource/bootstrap4/css/bootstrap.css">
<script src="resource/js/jquery-3.2.1.js"></script>
<script src="resource/bootstrap4/js/bootstrap.js"></script>
<title>修改页面</title>
</head>
<body>
<div align="center">
<form:form modelAttribute="goods" action="/add" method="post">
名字: <form:input path="name"></form:input><br/><br/>
价格: <form:input path="price"></form:input><br/><br/>
品牌:<form:select path="bid">
<form:option value="">请选择</form:option>
</form:select><br/><br/>
制造时间: <form:input path="created" type="date"></form:input><br/><br/>
图片:<input type="file" onchange="upfile(this)">
<c:if test="${goods.picurl!=null}">
<c:forTokens items="${goods.picurl}" delims="," var="url">
<img height="80px" src=${url}>
<input type="hidden" name="picurl" value="${url}">
</c:forTokens>
</c:if>
<span class="img"></span>
<br/><br/>
地址:<form:select path="pid" onchange="getCity2(this.value)">
<form:option value="">请选择</form:option>
</form:select>
<form:select path="cid" onchange="getCity3(this.value)">
<form:option value="">请选择</form:option>
</form:select>
<form:select path="aid">
<form:option value="">请选择</form:option>
</form:select><br/><br/>
描述: <form:input path="info"></form:input><br/><br/>
<input type="submit" value="提交" />
</form:form>
</div>
</body>
<script>
$(function (){
// 文档就绪函数
$.post("getBrand",function (list){
for (var i in list){
$("[name='bid']").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>")
}
$("[name='bid']").val(${goods.bid});
})
$.post("getCityList",{pid:1},function (list){
for (var i in list){
$("[name='pid']").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>")
}
var pid='${goods.pid}';
$("[name='pid']").val(pid);
getCity2(pid)
})
// sync=false;
})
// 上传文件
function upfile(obj){
var fd=new FormData();
fd.append("file",obj.files[0]);
$.ajax({
data:fd,
type:"post",
url:"upfile",
contentType:false,
processData:false,
success:function (url){
$(".img").append("<img src='"+url+"' height='80px'/>")
$(".img").append("<input type='text' name='picurl' value='"+url+"'/>")
}
})
}
function getCity2(id){
$("[name='cid']").html('<option>请选择</option>')
$("[name='aid']").html('<option>请选择</option>')
$.post("getCityList",{pid:id},function (list){
for (var i in list){
$("[name='cid']").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>")
}
var cid='${goods.cid}'
$("[name='cid']").val(cid);
getCity3(cid)
})
}
function getCity3(id){
$("[name='aid']").html('<option>请选择</option>')
$.post("getCityList",{pid:id},function (list){
for (var i in list){
$("[name='aid']").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>")
}
var aid='${goods.aid}'
$("[name='aid']").val(aid);
})
}
</script>
</html>注:该代码存在 BUG 慎用
标签：function,name,回显,list,pid,append,联动,var,三级 来源： https://blog.csdn.net/WaifeYang/article/details/122003751
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。