自定義級聯下拉框

        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下拉框即可。