Question

我刚开始使用select2 jquery插件。我正在尝试代码扩展。我添加了所有cdn链接（css，js，jquery等）。但是我的选择项目还没有改变。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>

<!--  Meta  -->
<meta charset="UTF-8" />
<title>My New Pen!</title>

<!--  Styles  -->
<link rel="stylesheet" href="styles/index.processed.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
</head>
<body>

<div style="width:600px;"> 
    <form action="post"> 
        <select name="" id="myselection"> 
            <option value="dhaka"> Dhaka </option>
            <option value="braishal"> Barishal </option>
            <option value="Khulna"> Khulna </option>
            <option value="rajshahi"> Rajshahi </option>
            <option value="dinajpur"> Dinajpur </option>
        </select>
    </form>
</div>

<!-- Scripts -->
<script src="scripts/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

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

Answer 1

必须在Select2脚本之前导入JQuery才能使用它。

所以正确的导入顺序应为：

的jQuery
选择二
页面特定的Javascript

<!DOCTYPE html>
<html lang="en">
<head>

<!--  Meta  -->
<meta charset="UTF-8" />
<title>My New Pen!</title>

<!--  Styles  -->
<link rel="stylesheet" href="styles/index.processed.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
</head>
<body>

<div style="width:600px;"> 
    <form action="post"> 
        <select name="" id="myselection"> 
            <option value="dhaka"> Dhaka </option>
            <option value="braishal"> Barishal </option>
            <option value="Khulna"> Khulna </option>
            <option value="rajshahi"> Rajshahi </option>
            <option value="dinajpur"> Dinajpur </option>
        </select>
    </form>
</div>

<!-- Scripts -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js">
</script>
<script src="scripts/index.js"></script>

<script type="text/javascript"> 
    $(document).ready(function() {
$('#myselection').select2();
   });
  </script>
</body>
</html>

select2 js插件无效

1 个答案: