select2还没有工作＆＃34;选择＆＃34;选项

Question

使用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项目。

但是如果我尝试添加/删除项目，除了第一个项目之外的所有选定项目都将被删除！ 您可以从屏幕截图中看到，所选的选项不会显示在灰色背景中，例如＆＃34;阿富汗＆＃34; ！

对导致问题的原因有所了解吗？

编辑（已解决）

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

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

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;