二级联动

 <!-- 新增属性 -->
                         <div class="form-group">
                       <label class="col-sm-2 col-sm-2 control-label">
                        <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">公共规格</font></font></label>
                            <div class="one">
                             <div class="col-sm-4 com">
                               公共属性
                             </div>
                             <div class="col-sm-1 com">|</div>
                             <div class="col-sm-3 com">
                               公共属性值
                             </div>
                             <div class="col-sm-1 com">
                              </div>
                            </div>
                         <div class="ap">   
                          <div class="two two_com two_com_1" >
                           
                             <div class="col-sm-4 com">
                                <select class="select_10 sel" name='ss'>
                                   <option value="">选择公共属性</option>
                                   {volist name="attr" id="vo"}
                                   <option value="{$vo.attr_id}">{$vo.attr_name}</option>
                                   {/volist}
                                </select>
                            </div> 
                             <div class="col-sm-1 com">|</div>
                             <div class="col-sm-3 com">
                                <select class="con_inp sel_z see" name='zhi'>
                                   <option value="">属性值</option>

                                </select>
                                
                             </div>
                             <div class="col-sm-1 com">
                               <span class="add" >+添加</span>
                             </div>
                             <div class="col-sm-1 com">
                                

                             </div> 
                               
                          </div> 
                          <br/>
                  
                          </div>
                   
                               
                          </div>

<script>    
function add(){
      var html = '';
    
      html +=  "<div class='two two_com'>";
      html +=  "<div class='col-sm-2 com'></div>";  
      html +=  "<div class='col-sm-4 com'>";
                                   
      html +=  "<select class='"+aa+" sel' id='sele' name='ss'>";
      html +=  "<option value=''>选择公共属性</option>";
      html +=  "{volist name='attr' id='vo'}";
      html +=  "<option value='{$vo.attr_id}'>{$vo.attr_name}</option>";
      
      html +=  " {/volist}"
      html +=  "</select>"
      html +=  "</div>";
      html +=  "<div class='col-sm-1 com'>|</div>"; 
      html +=  "<div class='col-sm-3 com'>";
      html +=  "<select class='sel_z' name='zhi'>"; 
      html +=  "<option value=''>属性值</option>";
 
      html +=  "</select>";
      html +=  "</div>";
      html +=  "<div class='col-sm-1 com'>";
      html +=  "<span class='add'>+添加</span>"
      html +=  "</div>";
      html +=  "<div class='col-sm-1 com'>";
      html +=  "<span class='remove'>-删除</span>";
      html +=  "</div>"; 
      html +=  "</div>";
     $('.ap').append(html);
    } 

        $(document).on('click','.add',function(){
        add();
        })
        $(document).on('click','.remove',function(){
          $(this).parent().parent().remove();
        })
 //动态下拉框二级联动接口请求
        $('.ap').on("change","select[name='ss']",function(){   //绑定一级下拉框未来元素
                  var i=$("select[name='ss']").index(this);    //获取一级下拉框下标

           // console.log(i);
          var aa = $("select[name='ss']").eq(i).val();         //获取每个元素的值
          $.ajax({                                             //请求接口
              type: "Post", 
              url: "",
              data: {attr_id:aa },
              dataType: "json",
              success: function(data){
               
                          $("select[name='zhi']").eq(i).empty();   //成功请求后清空里面的二级元素所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               
                               html += "<select  name='zhi'>";
                               html += "<option value=''>"+comment['attr_val']+"</option>";
                               html += "</option>";
                               html += "</select>";
                         })
                         ;
                         $("select[name='zhi']").eq(i).html(html);     //赋值
                      
                        }
          })
        })
</script>