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

<!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">爆品list表  id:</label>-->
<!--				<div class="col-sm-8">-->
<!--					<input id="commodityId" name="commodityId" 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="saleCount" name="saleCount" 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="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="specs" name="specs" 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="commodityArea" name="commodityArea" 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="soldOut" name="soldOut" class="form-control" type="text">-->
<!--				</div>-->
<!--			</div>-->
<!--			<div class="form-group">	-->
<!--				<label class="col-sm-3 control-label">0 是可以选择退款 产品: 1是不能退款的产品:</label>-->
<!--				<div class="col-sm-8">-->
<!--					<input id="status" name="status" 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="createId" name="createId" 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="createDate" name="createDate" 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="updateId" name="updateId" 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="updateDate" name="updateDate" 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="text">-->
					<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="ticketUrl" name="ticketUrl" 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="briefUrl" name="briefUrl" class="form-control" type="file">
				</div>
			</div>
<!--			<div class="form-group">	-->
<!--				<label class="col-sm-3 control-label">行业id:</label>-->
<!--				<div class="col-sm-8">-->
<!--					<input id="industryId" name="industryId" 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="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="detailfont" name="detailfont" 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="detailimg" name="detailimg" 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="childSpecs" name="childSpecs" 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">
<!--				<p>详情</p>-->
				<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是汤圆丫

怎么 给1分?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值