直接上代码
<div id="goodsattr" class="tab-pane">
<div class="form-group">
<label for="username" class="col-sm-2 control-label no-padding-right">商品类型</label>
<div class="col-sm-6">
<select name="type_id">
<option value="0">请选择</option>
{volist name="typeRes" id="type"}
<option value="{$type.id}">{$type.type_name}</option>
{/volist}
</select>
</div>
</div>
<div id="attr_list">
<!-- 属性显示 -->
</div>
<script type="text/javascript">
$("select[name=type_id]").change(function(){
var type_id=$(this).val();
$.ajax({
type:"POST",
url:"{:url('Attr/ajaxGetAttr')}",
data:{type_id:type_id},
dataType:"json",
success:function(data){
// console.log(data);
var html="";
$(data).each(function(k,v){
if(v.attr_type == 1){
// 单选处理
html+="<div class='form-group'>";
html+="<label class='col-sm-2 control-label no-padding-right'>"+v.attr_name+"</label>";
var attrValuesArr=v.attr_values.split(",");
html+="<div class='col-sm-6'><a class='abtn' onclick='addrow(this);' href='#'>[+]</a>";
html+="<select name='goods_attr["+v.id+"][]'>";
html+="<option value=''>请选择</option>";
for(var i=0; i<attrValuesArr.length; i++){
html+="<option value='"+attrValuesArr[i]+"'>"+attrValuesArr[i]+"</option>";
}
html+="</select>";
html+="<input class='form-control price' placeholder='价格' name='attr_price[]' type='text'>";
html+="</div></div>";
}else{
// 唯一处理
if(v.attr_values){
html+="<div class='form-group'>";
html+="<label class='col-sm-2 control-label no-padding-right'>"+v.attr_name+"</label>";
var attrValuesArr=v.attr_values.split(",");
html+="<div class='col-sm-6'>";
html+="<select name=goods_attr["+v.id+"]>";
html+="<option value=''>请选择</option>";
for(var i=0; i<attrValuesArr.length; i++){
html+="<option value='"+attrValuesArr[i]+"'>"+attrValuesArr[i]+"</option>";
}
html+="</select>";
html+="</div></div>";
}else{
html+="<div class='form-group'>";
html+="<label class='col-sm-2 control-label no-padding-right'>"+v.attr_name+"</label>";
var attrValuesArr=v.attr_values.split(",");
html+="<div class='col-sm-6'>";
html+="<input class='form-control price' name=goods_attr["+v.id+"] type='text'>";
html+="</div></div>";
}
}
});
$("#attr_list").html(html);
}
});
});
function addrow(o){
var div=$(o).parent().parent();
if($(o).html() == '[+]'){
var newdiv=div.clone();
newdiv.find('a').html('[-]');
div.after(newdiv);
}else{
div.remove();
}
}
// 异步获取指定类型下的属性
public function ajaxGetAttr(){
$typeId=input('type_id');
$attrRes=db('attr')->where(array('type_id'=>$typeId))->select();
echo json_encode($attrRes);
}