原生HTML Select下拉多选 + vue

项目依赖：

• vue.js
• jquery.js 
• bootstrap.min.js 
• bootstrap.min.css 
• bootstrap-select.min.css 
• bootstrap-select.min.js 
• languages.js

最终实现结果：

1.自动切换中/英文

2.编辑时带出默认值，并且勾选默认值

实现代码：

1.声明接收勾选内容的变量    showReason = [];

2.页面上添加select组件 -- 我这里分成了中文和英文

<!-- lang(自定义变量：判断当前是中文还是英文)   multiple：指定当前select为多选   title：输入框里面的默认值 -->
<select v-if="lang == 'tw'" class="selectpicker" multiple id="selector_show_zh" title=" " v-model="showReason"></select>
<select v-else class="selectpicker"  multiple title=" " id="selector_show_en" v-model="showReason"></select>

3.进入页面初始化 mouted()

4.渲染列表的主方法加入参数 -- lang：中/英文 ,showReason：勾选数据，type：区分输入框

getCustomerComplaintReasons(lang,reasons,type){
       //调用后台接口
      findCustomerComplaintReasons().then((res) => {
        var json = eval(res.data);
        //循环
        $.each(json,function(index,item){
          //英文切换成中文，勾选的是英文，匹配key值；中文切换成英文，勾选的是中文，匹配value值；
          if(reasons != undefined && (
                (lang == 'tw' && reasons.indexOf(json[index].reasonNameEn) >= 0) || 
                (lang != 'tw' && reasons.indexOf(json[index].reasonNameEn) >= 0)
              ) && type == "show"){
            $("#selector_show_zh").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\" selected='selected'>"+json[index].reasonNameZh+"</option>");  
            $("#selector_show_en").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\" selected='selected'>"+json[index].reasonNameEn+"</option>");
          }else{
            $("#selector_show_en").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\">"+json[index].reasonNameEn+"</option>");
            $("#selector_show_zh").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\">"+json[index].reasonNameZh+"</option>");
          }
          $("#selector_add_zh").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\">"+json[index].reasonNameZh+"</option>");
          $("#selector_add_en").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\">"+json[index].reasonNameEn+"</option>");

          if(reasons != undefined && (
                (lang == 'tw' && reasons.indexOf(json[index].reasonNameEn) >= 0) || 
                (lang != 'tw' && reasons.indexOf(json[index].reasonNameEn) >= 0)
              ) && type == "edit"){
            $("#selector_edit_zh").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\" selected='selected'>"+json[index].reasonNameZh+"</option>");  
            $("#selector_edit_en").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\" selected='selected'>"+json[index].reasonNameEn+"</option>");
          }else{
            $("#selector_edit_zh").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\">"+json[index].reasonNameZh+"</option>");
            $("#selector_edit_en").append("<option class='option_item' value=\""+json[index].reasonNameEn+"\">"+json[index].reasonNameEn+"</option>");
          }
        });
        //刷新列表中的数据
        $('#selector_show_zh').selectpicker('refresh');
        $('#selector_show_en').selectpicker('refresh');
        $("#selector_add_zh").selectpicker('refresh');
        $("#selector_add_en").selectpicker('refresh');
        $("#selector_edit_zh").selectpicker('refresh');
        $("#selector_edit_en").selectpicker('refresh');
      });
    }

5.切换中/英文添加监听 

"$i18n.locale"() {
      this.lang = this.$i18n.locale;
      //清除选择框中的选择项的显示的value值
      this.setSelectDataNull();
      //清空列表内容
      if ( $("option.option_item").length > 0 ) {
        $("option.option_item").remove();
      }
      //重新渲染列表
      this.getCustomerComplaintReasons(this.lang,this.showReason,"show");
    }

6.编辑出现默认值且勾选

this.setSelectDataNull();
if ( $("option.option_item").length > 0 ) {
    $("option.option_item").remove();
}
this.getCustomerComplaintReasons(this.lang,res.data.reasonList.join(","),"edit");

补充两个方法：

//清除选择框中的选择项的显示的value值
setSelectDataNull(){
    $("#selector_show_zh").selectpicker('val',['noneSelectedText']);
    $("#selector_show_en").selectpicker('val',['noneSelectedText']);
    $("#selector_add_zh").selectpicker('val',['noneSelectedText']);
    $("#selector_add_en").selectpicker('val',['noneSelectedText']);
    $("#selector_edit_zh").selectpicker('val',['noneSelectedText']);
    $("#selector_edit_en").selectpicker('val',['noneSelectedText']);
},
//下拉选默认初始化加载不选择内容
cancelSelectData(){
    $("#selector_show_zh").selectpicker('deselectAll');
    $("#selector_show_en").selectpicker('deselectAll');
    $("#selector_add_zh").selectpicker('deselectAll');
    $("#selector_add_en").selectpicker('deselectAll');
    $("#selector_edit_zh").selectpicker('deselectAll');
    $("#selector_edit_en").selectpicker('deselectAll');
}