尝试动态更改Select2时出错

时间:2017-03-03 21:45:22

标签: javascript asp.net-mvc select2

我正在开发一个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方法。

CODE:

 <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运行时错误:对象不支持属性或方法&#39; select2&#39;

我确保没有双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>

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

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

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

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

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