select2 不适用于已经“选定”的选项答案

【问题标题】：select2 not working on already "selected" optionsselect2 不适用于已经“选定”的选项
【发布时间】：2017-05-13 15:01:58
【问题描述】：

我使用select2 插件来选择多个国家。当我填充<select> 的选项时，对于某些<option>，我使用selected 属性来预选它。

代码（选项在页面中使用 PHP 回显）：

<select name="allowed_countries[]" class="form-control select2" multiple="multiple" required>
  <option value="ALL"  >All Countries</option>
  <option selected value="AF">Afghanistan</option>
  <option value="AL">Albania</option>
  <option selected value="DZ">Algeria</option>
  <option value="DS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option selected value="AI">Anguilla</option>
  <option value="AQ">Antarctica</option>
  <option selected value="AG">Antigua and Barbuda</option>
  <option value="AR">Argentina</option>
  <option value="AM">Armenia</option>
  <option value="AW">Aruba</option>
  <option selected value="AU">Australia</option>
  <option value="AT">Austria</option>
  ....
</select>

在页面的页脚，我正在调用函数：

<script>    

    $(document).ready(function(){

        $(".select2").select2();

    });

</script>

它正确显示selected 项目。

但是如果我尝试添加/删除一个项目，除了第一个项目之外的所有选定项目都会被删除！从截图中可以看出，被选中的选项并没有像“阿富汗”那样以灰色背景显示！

对导致问题的原因有任何想法吗？

编辑（已解决）

经过多次调试，发现问题出在该页面上的另一行：$(":input").inputmask(); 这个选择器似乎导致了冲突。我刚刚删除了具有特定类名的选择器，我正在使用输入掩码，select2 现在似乎工作正常！

感谢所有试图帮助我的人。我很感激。

【问题讨论】：

select2 是什么版本的？
@DanielH 4.0.3
使用 select 来代替
你能在选中的选项被取消选中后检查 html 吗？
谢谢大家。经过几次尝试调试，发现问题出在该页面上的另一行：$(":input").inputmask(); 这个选择器似乎导致了冲突。我刚刚删除了具有特定类名的选择器，我正在使用输入掩码，select2 现在似乎工作正常！

标签： jquery jquery-select2

【解决方案1】：

$(function () {
    $('.select2')
        .select2({
            width: 500
        })
        .on('change', function(){
            console.log( $(this).val() );
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<select name="allowed_countries[]" class="form-control select2" multiple="multiple" required>
  <option value="ALL"  >All Countries</option>
  <option selected value="AF">Afghanistan</option>
  <option value="AL">Albania</option>
  <option selected value="DZ">Algeria</option>
  <option value="DS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option selected value="AI">Anguilla</option>
  <option value="AQ">Antarctica</option>
  <option selected value="AG">Antigua and Barbuda</option>
  <option value="AR">Argentina</option>
  <option value="AM">Armenia</option>
  <option value="AW">Aruba</option>
  <option selected value="AU">Australia</option>
</select>

【讨论】：

我觉得不错？
谢谢。经过几次尝试调试，发现问题出在该页面上的另一行：$(":input").inputmask(); 这个选择器似乎导致了冲突。我刚刚删除了具有特定类名的选择器，我正在使用输入掩码，select2 现在似乎工作正常！