自定义级联下拉框

        2018年4月16号，周一，阳光明媚，暂时告一段落(for something)，继续做个安静的小女子：

        先看效果：

        相信各位大同学对于这样的级联框非常熟悉了吧？为了避免自己以后再次用到这样的功能（现成的级联组件暂不讨论），特地记录下自己实现这一小功能的步骤，于人于己都方便：

---

...
    <div class="col-sm-11">
                    <label class="control-label col-sm-1" style="padding: 7px 0 0 0">大类：</label>
                    <div  class="col-sm-3">
                        <select id="bigcate" class="form-control" name="bigcate" onchange="bigcateChange('bigcate','areabargain','finalbargain')">
                            <option value="-99" selected="selected">请选择</option>
                        </select>
                    </div>
                    <label class="control-label col-sm-1" style="padding: 7px 0 0 0">父类：</label>
                    <div  class="col-sm-3">
                        <select id="areabargain" class="form-control" name="areabargain" onchange="bigcateChange('areabargain','finalbargain')">
                            <option value="-99" selected="selected">请选择</option>
                        </select>
                    </div>
                    <label class="control-label col-sm-1" style="padding: 7px 0 0 0">指标：</label>
                    <div  class="col-sm-3">
                        <select class="selectpicker form-control" data-live-search="true" id="finalbargain" name="finalbargain">
                            <option value="-100" selected="selected">请选择</option>
                        </select>
                    </div>
                </div>
...

 //当大类及父类改变时触发
    function bigcateChange(firstName,secondName,thirdName) {
        var bigAreaValue=jQuery("#"+firstName+"").val();
        jQuery("#"+secondName+"").html('<option value="-99" selected="selected">请选择</option>');
        if(thirdName){
            jQuery("#"+thirdName+"").html('<option value="-99" selected="selected">请选择</option>');
        }
        if(bigAreaValue!=-99){
            selectOption(secondName,bigAreaValue);  //当前选项框选择完毕给相邻下拉框赋值
        }else{
            $('#'+thirdName).selectpicker('refresh');
        }
    }

//给option下拉框赋值
    function selectOption(idname,bigAreaId){
        $.post('/dcenter/society/bigcategory',{id:bigAreaId}, function(result){
            if(result.length>0){
                var html='';
                for(var i=0;i<result.length;i++){
                    html+="<option value="+result[i].id+" >"+result[i].name+"</option>";
                }
                jQuery("#"+idname+"").append(html);
            }
            $('#finalbargain').selectpicker('refresh');
        });
    }

        后台接口的查询方法(方法类似)：

 /**
   * 获取大类数据数据
   * @returns {Promise.<void>}
   */
  async bigcategoryAction(){
    let id=this.post().id;
    let userInfo = await this.session(this.config('ggsjsc_sessionKey'));
    let result = await this.model('a_tagsuser').alias('p1').join('tags p2 ON p1.id=p2.id').where({pid:id,state:1,userid:userInfo.id}).select();
    if(result.length < 1){
        if(userInfo.mark==3){
            result = await this.model('a_tagsuser').alias('p1').join('tags p2 ON p1.id=p2.id').where({pid:id,state:1,userid:userInfo.pid}).select();
        }
    }
    return this.json(result)
  }

---

      1.select的onchange事件：

        2.拼接option下拉框即可。