javascript - 尝试动态更改 Select2 时出错

Question

我正在开发一个 ASP.NET MVC Web 项目。由于其简洁且吸引人的功能，我目前在项目中的几个下拉列表中使用 select2。我也遇到了 select2 的一些问题。我想在创建页面上创建一个下拉列表，当另一个下拉列表值更改时，该下拉列表会“更改”状态。 Select2 有一个下拉菜单，可以从下拉结果中进行选择，也可以输入您自己的条目并保存。 (请参阅 https://select2.github.io/examples.html 上的标记部分)。我需要能够通过 javascript AFTER 页面加载动态打开/关闭标签。看来 select2 只会初始化下拉列表，之后就不允许动态更改。

查看用于在页面加载时初始化 select2 的 Html 和 Javascript 代码:

 <div class="col-md-8">
   @Html.ListBoxFor(model => model.modelNum, Model.modelNumList, new { @class= "js-tags" })
 </div>

<script type="text/javascript">    

        $(".js-tags").select2({
            placeholder: "Enter Model",
            tags: true,
            maximumSelectionLength: 1
        })

</script>

上面的部分效果很好。 Select2 已初始化，并遵循我的设置。此后，我的计划是更改 select2 的设置，销毁并重新初始化实例，因此编辑下拉列表并关闭标签。当另一个下拉列表更改时，将调用以下 JavaScript 方法。

代码:

 <script type="text/javascript" language="javascript">
   function ChangeModelNum(_classID)
   {
       if(_classID == 1)
       {
           $(".js-tags").select2("destroy").select2({
               placeholder: "Select Model",

               tags: false,
               maximumSelectionLength: 1
           })             
       }
       else
       {
           $(".js-tags").select2({
               placeholder: "Enter Model",
               tags: true,
               maximumSelectionLength: 1
           })
       }
   }

如您所见，如果用户选择 classID 为 1，我想禁用下拉列表的标记。但这根本行不通。我也在开发者工具中遇到此错误:

JavaScript runtime error: Object doesn't support property or method 'select2'

我已经确保没有双重 jquery 引用。不明白为何完美使用后Select2就报错。

添加:

下面是触发ChangeModelNum的代码:

 <div class="col-md-2">
                @Html.DropDownListFor(model => model.classnum, Model.classL, "Select Class", new { @onchange = "javascript:ChangeModelNum(this.value);", @class = "form-control" })

            </div>

感谢您的帮助!

Answer 1

我不确定，但我认为这个特定的错误可能是由方法链接引起的

$(".js-tags").select2("destroy").select2... 

尝试将其拆分为两个单独的调用:

$(".js-tags").select2("destroy");
$(".js-tags").select2({
               placeholder: "Select Model",
               tags: false,
               maximumSelectionLength: 1
           })