select2 不能在带有 masterpage 的 aspx 页面中工作

Question

我有一个使用母版页构建的网络表单应用程序。就在最近，我一直在尝试将 select2 下拉菜单添加到其中一个表单中。

当我运行在独立页面中编写代码时，没问题。但是当从母版页继承时，它不能很好地工作 - 请参见图像以获取示例。

当我在 Chrome 中按 F12 时，没有 jQuery 错误。

在母版页的头部，我有以下顺序：

<!-- Bootstrap core JavaScript-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="/vendor/jquery-easing/jquery.easing.min.js"></script>

在子页面的 Content1 中，我有 Select2 js 链接：

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

最后，在表单的最底部（在子页面中）我有这个：

    <script>
        $(document).ready(function () {
            $("#selectContacts").select2({ placeholder: 'Select Member' });
        });
    </script>

我试过将 select2 脚本移出子页面，也移到母版页的页眉中，但这也不起作用。

我做错了什么？

Answer 1

lol ... 搜索了几个小时... 我 post 这个问题然后在 10 分钟后偶然发现了答案！

jQuery UI Multiple Select not working in .aspx page that is content for a master page

我需要做的就是将此选项添加到 select：

clientidmode="Static"

Answer 2

$('#example').select2({
    placeholder: 'Select an option'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />



<select id="example" multiple="multiple" style="width: 300px">
   <option value="example1">example1</option>
    <option value="example2">example2</option>
    <option value="example3">example3</option>
    <option value="example4">example4</option>
    <option value="example5">example5</option>
    <option value="example6">example6</option>
</select>

select2 不能在带有 masterpage 的 aspx 页面中工作

select2 not working in aspx page with masterpage

javascript

asp.net

jquery

webforms