嘗試動態更改Select2時出錯

Question

我正在開發一個ASP.NET MVC Web項目。 由於其干凈且吸引人的功能，我目前在我的項目中使用select2進行多個下拉菜單。 我在select2上也遇到了一些問題。 我想在創建頁面上創建一個下拉列表，當另一個下拉列表值更改時，該頁面會“更改”狀態。 Select2有一個下拉菜單，提供了從下拉結果中進行選擇或輸入自己的條目並保存的功能。 （請參閱https://select2.github.io/examples.html上的標記部分）。 我需要能夠通過JavaScript在頁面加載后動態地打開/關閉標簽。 看來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運行時錯誤：對象不支持屬性或方法“ select2”

我已經確保也沒有雙重的jQuery引用。 完全使用完Select2之后，為什么它在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
           })