<%@ 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 慎用