Question

我为select2函数添加了这2行，即

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

，然后在视图文件中添加以下内容：

         <select id="cat_id" class="form-control">
            <option value="">please select a category</option>
            <option value="saab">A</option>
            <option value="saab">B</option>
            <option value="saab">C</option>
         </select>

好的，要使其正常工作，请按如下所示添加此脚本

    <script type="text/javascript">
    $(document).ready(function () {
        $('#cat_id').select2();
    });
</script>

Answer 1

请尝试此操作，它将为您提供帮助

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <title></title>
</head>
<body>
<select id="cat_id" class="form-control">
            <option value="">please select a category</option>
            <option value="saab">A</option>
            <option value="saab">B</option>
            <option value="saab">C</option>
         </select>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#cat_id').select2();
});
</script>

它将为您服务

Answer 2

也包括jquery链接并尝试

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#cat_id').select2();
    });
</script>

Answer 3

尝试此代码

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>


  <select id="cat_id" class="form-control">
            <option value="">please select a category</option>
            <option value="saab">A</option>
            <option value="saab">B</option>
            <option value="saab">C</option>
         </select>


          <script type="text/javascript">
    $(document).ready(function () {
        $('#cat_id').select2();
    });
</script>

Answer 4

只需在选择2 库之前添加 jQuery 库即可。

不适用。如果您使用 jQuery 的 slim版本，则可能无效。

Answer 5

在编码前使用$.noConflict();。我认为您的图书馆已被收录两次，或者可能有冲突。

<script type="text/javascript">
    $.noConflict(); // Remove jquery conflict
    $(document).ready(function () {
        $('#cat_id').select2();
    });
</script>

select2函数即使从CDN使用也无法正常工作

5 个答案: