<!-- 右 -->
<div class="content">
<div class="header">
<h1 class="page-title">商品新增</h1>
</div>
<!-- add form -->
<form action="{:url('save')}" method="post" id="tab" enctype="multipart/form-data">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#basic" data-toggle="tab">基本信息</a></li>
<li role="presentation"><a href="#desc" data-toggle="tab">商品描述</a></li>
<li role="presentation"><a href="#attr" data-toggle="tab">商品属性</a></li>
<li role="presentation"><a href="#pics" data-toggle="tab">商品相册</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="basic">
<div class="well">
<label>商品名称:</label>
<input type="text" name="goods_name" value="" class="input-xlarge">
<label>商品价格:</label>
<input type="text" name="goods_price" value="" class="input-xlarge">
<label>商品数量:</label>
<input type="text" name="goods_number" value="" class="input-xlarge">
<label>商品logo:</label>
<input type="file" name="logo" value="" class="input-xlarge">
<label>商品分类:</label>
<select name="" class="input-xlarge" id="cate_one">
<option value="">请选择一级分类</option>
{foreach $cate as $cate_one}
<option value="{$cate_one.id}">{$cate_one.cate_name}</option>
{/foreach}
</select>
<select name="" class="input-xlarge" id="cate_two">
<option value="">请选择二级分类</option>
</select>
<select name="cate_id" class="input-xlarge" id="cate_three">
<option value="">请选择三级分类</option>
</select>
</div>
</div>
<div class="tab-pane fade in" id="desc">
<div class="well">
<label>商品简介:</label>
<textarea id="editor" name="goods_introduce" class="input-xlarge" style="width:1000px;height:500px;"></textarea>
</div>
</div>
<div class="tab-pane fade in" id="attr">
<div class="well">
<label>商品类型:</label>
<select name="" class="input-xlarge">
<option value="2">电脑</option>
<option value="1">手机</option>
</select>
<div>
<label>商品品牌:</label>
<input type="text" name="" value="" class="input-xlarge">
<label>商品型号:</label>
<input type="text" name="" value="" class="input-xlarge">
<label>商品重量:</label>
<input type="text" name="" value="" class="input-xlarge">
</div>
</div>
</div>
<div class="tab-pane fade in" id="pics">
<div class="well">
<div>[<a href="javascript:void(0);" class="add">+</a>]商品图片:<input type="file" name="goods_pics[]" value="" class="input-xlarge"></div>
</div>
</div>
<button class="btn btn-primary" type="submit">保存</button>
</div>
</form>
<!-- footer -->
<footer>
<hr>
<p>© 2017 <a href="javascript:void(0);" target="_blank">ADMIN</a></p>
</footer>
</div>
<script type="text/javascript">
$(function(){
//实例化富文本编辑器
UE.getEditor('editor');
$('.add').click(function(){
var add_div = '<div>[<a href="javascript:void(0);" class="sub">-</a>]商品图片:<input type="file" name="goods_pics[]" value="" class="input-xlarge"></div>';
$(this).parent().after(add_div);
});
//给未来元素绑定事件
// 根据jq的版本,1.8及以下版本中 使用live
// 1.9及以上版本 使用on
$('.sub').live('click',function(){
$(this).parent().remove();
});
//给一级分类下拉列表绑定change事件
$('#cate_one').change(function(){
//将二级分类和三级分类的下拉列表 还原
$('#cate_two').html('<option value="">请选择二级分类</option>');
$('#cate_three').html('<option value="">请选择三级分类</option>');
//发送ajax请求,以选中的分类id为参数
var cate_id = $(this).val();
if(cate_id == ''){
return;
}
//组装请求参数
var data = {
"id":cate_id
};
$.ajax({
"url":"{:url('admin/category/getCateByPid')}",
"type":"post",
"data":data,
"dataType":"json",
"success":function(res){
if(res.code != 10000){
alert(res.msg);return;
}
//请求成功,需要将分类数据显示到页面
//遍历 res.data 拼接option标签
var str = '<option value="">请选择二级分类</option>';
$.each(res.data, function(i, v){
//v 就是一条数据,是json格式对象
str += '<option value="' + v.id + '">' + v.cate_name + '</option>';
});
//将拼接好的html代码字符串,放到页面 二级分类下拉列表中
$('#cate_two').html(str);
}
});
});
//给二级分类下拉列表绑定change事件
$('#cate_two').change(function(){
//将三级分类下拉列表 还原
$('#cate_three').html('<option value="">请选择三级分类</option>');
//获取选中的分类id
var cate_id = $(this).val();
if(cate_id == ''){
return;
}
//组装请求参数
var data = {
'id':cate_id
};
//发送ajax请求
$.ajax({
'url':"{:url('admin/category/getCateByPid')}",
"type":"post",
"data":data,
"dataType":"json",
"success":function(res){
if(res.code != 10000){
alert(res.msg);return;
}
//请求成功,将分类数据显示到页面 三级分类下拉列表中
//遍历res.data 拼接option标签
var str = '<option value="">请选择三级分类</option>';
$.each(res.data, function(i, v){
str += '<option value="' + v.id + '">' + v.cate_name + '</option>';
});
//将拼接的html代码字符串,放到页面中
$('#cate_three').html(str);
}
});
});
});
</script>
文本
最新推荐文章于 2024-07-26 11:41:15 发布