Javascript Multi-select 插件不工作

Question

我正在使用以下插件 Chosen Plugin，但我不知道为什么它不起作用。这是我的以下代码及其显示的内容。

<html lang="en">

<head>

<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="chosen.jquery.css" />

<script type="text/javascript" src="chosen.jquery.min.js"></script>

<script type="text/javascript" src="chosen.jquery.js"></script>



<script type="text/javascript">

 $(".chosen-select").chosen();

</script>

</head>

<body>

    <select style="width:350px;" multiple class="chosen-select">

        <option value=""></option>

<option value="1">Option 1</option>

<option value="2">Option 2</option>

<option value="3">Option 3</option>

<option value="4">Option 4</option>

<option value="5">Option 5</option>

<option value="6">Option 6</option>

<option value="7">Option 7</option>

<option value="8">Option 8</option>

<option value="9">Option 9</option>

<option value="10">Option 10</option>

</select>

</body>

</html>

Answer 1

您在 DOM 内容加载前调用 chosen 插件。将下面的代码移到 body 的底部就可以了

<script type="text/javascript">

 $(".chosen-select").chosen();

</script>

Answer 2

将 $(".chosen-select").chosen(); 放在 select 元素之后，或者运行准备就绪后

$(function() {
  $(".chosen-select").chosen();
});

Javascript Multi-select 插件不工作

Javascript Multi-select plugin not working

javascript

jquery

jquery-chosen