tp5商品类型中的change事件

直接上代码 

<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);
    }