前端html ajax的一二级下拉框查询

青旅半醒 2023-10-05 15:24 35阅读 0赞

<!DOCTYPE HTML>
    <html  lang="zh" xmlns:th="http://www.thymeleaf.org">
    <meta charset="utf-8">
    <head th:include="include :: header">
    </head>
    <link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/summernote/summernote-bs3.css}" rel="stylesheet"/>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    		<form class="form-horizontal m" id="form-commodity-add">
    
    
    
    
    
    
    
    
    
    
    
    
    
    			<div class="form-group">
    				<label class="col-sm-3 control-label">商品名称：</label>
    				<div class="col-sm-8">
    					<input id="name" name="name" class="form-control" type="text">
    				</div>
    			</div>
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">商品最初价：</label>
    				<div class="col-sm-8">
    					<input id="marketPrice" name="marketPrice" class="form-control" type="text">
    				</div>
    			</div>
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">商品的现价：</label>
    				<div class="col-sm-8">
    					<input id="price" name="price" class="form-control" type="text">
    				</div>
    			</div>
    
    
    
    
    
    
    
    
    
    
    
    
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">商品详细简介：</label>
    				<div class="col-sm-8">
    					<input id="detailCode" name="detailCode" class="form-control" type="text">
    				</div>
    			</div>
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">商品的库存：</label>
    				<div class="col-sm-8">
    					<input id="commodityCount" name="commodityCount" class="form-control" type="text">
    				</div>
    			</div>
    
    
    
    
    
    
    
    
    
    
    
    
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">商品信息简介(标题)：</label>
    				<div class="col-sm-8">
    					<input id="commodityBrief" name="commodityBrief" class="form-control" type="text">
    				</div>
    			</div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">优惠卷：</label>
    				<div class="col-sm-8">
    					<input id="other" name="other" class="form-control" type="text">
    				</div>
    			</div>
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">商品的主图：</label>
    				<div class="col-sm-8">
    
    					<input id="url" name="url" class="form-control" type="file">
    				</div>
    			</div>
    
    
    
    
    
    
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">商品的副图(详情图)：</label>
    				<div class="col-sm-8">
    					<input id="briefUrl" name="briefUrl" class="form-control" type="file">
    				</div>
    			</div>
    
    
    
    
    
    
    			<div class="form-group">
    				<label class="col-sm-3 control-label">店铺：</label>
    
    				<div class="col-sm-8">
    					<select id="mailId" name="mailId" underline="true" class="form-control">
    						<option value="0">请选择商品要上传的店铺</option>
    					</select>
    				</div>
    			</div>
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">分销反价：</label>
    				<div class="col-sm-8">
    					<input id="rebatePrice" name="rebatePrice" class="form-control" type="text">
    				</div>
    			</div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    			<div class="form-group">	
    				<label class="col-sm-3 control-label">小票优惠的价钱：</label>
    				<div class="col-sm-8">
    					<input id="ticketPrice" name="ticketPrice" class="form-control" type="text">
    				</div>
    			</div>
    			<div class="form-group">
    				<label class="col-sm-3 control-label">vip分销价钱：</label>
    				<div class="col-sm-8">
    					<input id="vipIncome" name="vipIncome" class="form-control" type="text">
    				</div>
    			</div>
    			<div class="form-group">
    				<label class="col-sm-3 control-label">儿童票打几折：</label>
    				<div class="col-sm-8">
    					<input id="childPrice" name="childPrice" class="form-control" type="text">
    				</div>
    			</div>
    			<div class="form-group">
    				<label class="col-sm-3 control-label">成人票打几折：</label>
    				<div class="col-sm-8">
    					<input id="specsPrice" name="specsPrice" class="form-control" type="text">
    				</div>
    			</div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">商品一级类型：</label>
                    <div class="col-sm-8">
                        <select id="instury" name="instury" underline="true" class="form-control" >
                            <option value="0">请选择商品一级类型</option>
                        </select>
                    </div>
                </div>
    			<div class="form-group">
    				<label class="col-sm-3 control-label">商品二级类型：</label>
    				<div class="col-sm-8">
                            <select id="typeId" name="商品类型id" underline="true" class="form-control">
                                <option value="0">请选择商品二级类型</option>
                            </select>
    				</div>
    			</div>
    			<div class="form-group">
    				<label class="col-sm-3 control-label">商品的种类：</label>
    				<div class="col-sm-8">
    					<select id="kindId" name="商品的种类的id" underline="true" class="form-control">
    						<option value="0">请选择商品的种类</option>
    					</select>
    				</div>
    			</div>
    			<div class="form-group">
    				<label class="col-sm-3 control-label">爆品秒杀：</label>
    				<div class="col-sm-8">
    					<select id="secondKill" name="请选择爆品秒杀" underline="true" class="form-control">
    						<option value="1">爆品</option>
    						<option value="2">秒杀</option>
    					</select>
    				</div>
    			</div>
    			<div class="form-group">
    				<label class="col-sm-3 control-label">选择商品的店铺地址：</label>
    				<div class="col-sm-8">
    					<select id="mailDetail" name="选择商品的店铺地址" underline="true" class="form-control">
    						<option value="0">选择商品的店铺地址</option>
    					</select>
    				</div>
    			</div>
    			<div class="form-group">
    			<label class="col-sm-3 control-label">商品详情文本：</label>
    			<div class="col-sm-8">
    
    				<input id="detailfont" name="detailfont"  type="hidden">
    				<div id="editor" class="summernote"></div>
    			</div>
    			</div>
    		</form>
    	</div>
        <div th:include="include::footer"></div>
    	<script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
    	<script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
        <script type="text/javascript">
    
    		var prefix = ctx + "system/commodity"
    		//summenote富文本编辑器初始化和上传文件重写
    		$(function() {
        
    			$('.summernote').summernote({
        
    				height : '220px',
    				lang : 'zh-CN',
    				callbacks: {
        
    					onImageUpload: function (files) {
        
    						sendFile(files[0], this);
    					}
    				}
    			});
    			var content = $("#detailfont").val();
    			console.log(content+"我是content");
    			$('#editor').summernote('code', content);
    			console.log("我是是是是code"+$('#editor').summernote('code', content));
    		});
    
    		// 上传文件
    		function sendFile(file, obj) {
        
    			var data = new FormData();
    			data.append("mediaFile", file);
    			$.ajax({
        
    				type: "POST",
    				url: prefix + "/uploadImage",
    				data: data,
    				cache: false,
    				contentType: false,
    				processData: false,
    				dataType: 'json',
    				success: function(result) {
        
    
    					$(obj).summernote('editor.insertImage', result.url, result.fileName);
    
    				},
    				error: function(error) {
        
    					console.log("图片上传失败。")
    				}
    			});
    		}
    
    		$("#form-commodity-add").validate({
        
    			rules:{
        
    				xxxx:{
        
    					required:true,
    				},
    			}
    		});
    
    		function submitHandler() {
        
    	        if ($.validate.form()) {
        
    	            // $.operate.save(prefix + "/add", $('#form-commodity-add').serialize());
    				var formdata = new FormData();
    				formdata.append("name", $('#name').val());
    				formdata.append("marketPrice", $('#marketPrice').val());
    				formdata.append("childPrice", $('#childPrice').val());
    				formdata.append("specsPrice", $('#specsPrice').val());
    				formdata.append("ticketPrice", $('#ticketPrice').val());
    				formdata.append("rebatePrice", $('#rebatePrice').val());
    				formdata.append("other", $('#other').val());
    				formdata.append("commodityBrief", $('#commodityBrief').val());
    				formdata.append("commodityCount", $('#commodityCount').val());
    				formdata.append("detailCode", $('#detailCode').val());
    				// formdata.append("commodityArea", $('#commodityArea').val());
    				formdata.append("price", $('#price').val());
                    formdata.append("typeId", $('#typeId').val());
    				formdata.append("kindId", $('#kindId').val());
    				formdata.append("mailId", $('#mailId').val());
    				formdata.append("vipIncome", $('#vipIncome').val());
    				formdata.append("secondKill",$('#secondKill option:selected').val());
    				formdata.append("mailDetail",$('#mailDetail option:selected').text());
    				var detailfontCode = $('.summernote').summernote('code');
    				console.log(detailfontCode+"我是富文本");
    				formdata.append("detailfont",detailfontCode);
    				if(document.getElementById("briefUrl").files[0]!==null&&typeof(document.getElementById("briefUrl").files[0]) != "undefined"){
        
    					formdata.append("briefUrl", document.getElementById("briefUrl").files[0]);
    				}else{
        
    					formdata.append("briefUrl", new File([null],null));
    				}
    				if(document.getElementById("url").files[0]!==null&&typeof(document.getElementById("url").files[0]) != "undefined"){
        
    					formdata.append("url", document.getElementById("url").files[0]);
    				}else{
        
    					formdata.append("url", new File([null],null));
    				}
    
    				console.log(formdata);
    				$.ajax({
        
    					url: prefix + "/add",
    					data: formdata,
    					type: "post",
    					processData: false,
    					contentType: false,
    					success: function(result) {
        
    						$.operate.saveSuccess(result);
    					}
    				})
    	        }
    	    }
    **一级一级一级一级一级一级一级一级一级一级一级 **
            $(function(){
        
                $.ajax({
        
                    url:"/system/industry/industryList",
                    type:"POST",
                    dataType:"json",
                    success:function (data) {
        
                        $("#instury").empty();
                        for(var i=0;i<data.length;i++){
        
                            $("#instury").append('<option value='+data[i].id+'>'+data[i].name+'</option>');
                        }
                    }
                })
            })
    **二级二级二级二级二级二级二级二级二级二级二级二级二级二级 **
    		$("#instury").change(function () {
        
    			console.log(this.options[this.options.selectedIndex].value)
    			var indexData =this.options[this.options.selectedIndex].value
    
    			$(function(){
        
    				$.ajax({
        
    					url:"/system/commodityType/listCommodityType",
    					type:"POST",
    					data:{
        
    						industryId:indexData
    					},
    					dataType:"json",
    						success:function (data) {
        
    					$("#typeId").empty();
    					for(var i=0;i<data.length;i++){
        
    						$("#typeId").append('<option value='+data[i].id+'>'+data[i].name+'</option>');
    					}
    				}
    			})
    		 })
    	 })
    
    
     
    		$(function(){
        
    			$.ajax({
        
    				url:"/system/commodityKind/commodityKindlist",
    				type:"POST",
    				dataType:"json",
    				success:function (data) {
        
    					$("#kindId").empty();
    					for(var i=0;i<data.length;i++){
        
    						$("#kindId").append('<option value='+data[i].id+'>'+data[i].kindName+'</option>');
    					}
    				}
    			})
    		})
    
    		$(function(){
        
    			$.ajax({
        
    				url:"/system/media/mailListByUserId",
    				type:"POST",
    				dataType:"json",
    				success:function (data) {
        
    					$("#mailId").empty();
    					for(var i=0;i<data.length;i++){
        
    						$("#mailId").append('<option value='+data[i].id+'>'+data[i].name+'</option>');
    					}
    				}
    			})
    		})
    
    		$(function(){
        
    			$.ajax({
        
    				url:"/system/mail/mailByMailDetail",
    				type:"POST",
    				dataType:"json",
    				success:function (data) {
        
    					$("#mailDetail").empty();
    					for(var i=0;i<data.length;i++){
        
    						$("#mailDetail").append('<option value='+data[i].id+'>'+data[i].mailDetail+'</option>');
    					}
    				}
    			})
    		})
    
    	</script>
    </body>
    </html>