三级联动及多图片的完美回显 ,简单易懂好上手,欢迎来找BUG

最新推荐文章于 2021-12-19 21:48:04 发布

原创最新推荐文章于 2021-12-19 21:48:04 发布 · 472 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #html #bootstrap

Web 前端页面专栏收录该内容

3 篇文章

订阅专栏

这是一个用于编辑商品信息的页面，包括商品名称、价格、品牌选择、制造时间等详细属性的输入和选择，支持图片上传预览及地理位置的选择。

<%@ 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;
          var index =1;
    })

    // 上传文件
    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>")
            }
            
            if (index==1){
               // 获取数据
                
                getCity3(${goods.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>")
            }

            if (index==1){
                // 只在第一次回显
                var cid='${goods.cid}'
                $("[name='cid']").val(cid);

                var aid='${goods.aid}'
                $("[name='aid']").val(aid);
                index +=1;
                console.log(index);
            }

        })
    }
</script>
</html>