select组件二级联动—(bootstrap-select)的问题

select使用bootstrap-select插件时实现二级联动，需要动态更新select组件的opiton内容，在使用插件后，就需要用$('#id').selectpicker('refresh')这段话来重绘UI
例如需要用到根据城市的选择更新区域的下拉框

HTML:
city组件：

 city 

Select City
  city1
  city2
  city3

area组件:

Area

  Select Area

每次选择city的时候需要触发重绘area选项的函数

function init_area() {
    var city = $("#city");
    var city_value = city.val();
    var area = $("#area");
    #移除area除第一个选项以外的其他选项
    area.find("option:not(:first)").remove();

    if (city_value == 'city1') {
        var area_value = ['area1',  'area2',  'area3'];
    } else if (city_value == 'city2') {
        var area_value = ['area4',  'area5',  'area6'];
    } else if (city_value == 'city3') {
        var area_value = ['area7',  'area8',  'area9'];
    }  else {
        var area_value = '';
    }
    if (area_value != '') {
        for(var i = 0; i < area_value.length; i++){
            area.append(new Option(area_value[i], area_value[i]));
        }
    } 
    area.selectpicker('refresh');
}

没有示例图，放一个其他的demo吧

image.png