Question

我正在尝试使用loudev multi-select.js来实现一个很好的多选字段。我按照页面上的步骤操作，但没有任何反应 - 只显示正常的多个<select>。 multi-select.css和jquery.multi-select.js的路径都可以。

我无法弄清楚什么是错的：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="/css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
  </head>
  <body>

    <select multiple="multiple" id="my-select" name="my-select[]">
      <option value='elem_1'>elem 1</option>
      <option value='elem_2'>elem 2</option>
      <option value='elem_3'>elem 3</option>
      <option value='elem_4'>elem 4</option>
      <option value='elem_100'>elem 100</option>
    </select>
    <script src="/js/jquery.multi-select.js" type="text/javascript"></script>
<script>
$('#my-select').multiSelect({});
</script>
  </body>
</html>

Answer 1

上面的代码工作得很好。您需要单击CTRL键并进行多项选择。您是否希望在开发人员网站上显示的右侧单独的框中看到所选项目？

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
  </head>
<body>

<select multiple="multiple" id="my-select" name="my-select[]">
  <option value='elem_1'>elem 1</option>
  <option value='elem_2'>elem 2</option>
  <option value='elem_3'>elem 3</option>
  <option value='elem_4'>elem 4</option>
  <option value='elem_100'>elem 100</option>
</select>
<script src="js/jquery.multi-select.js" type="text/javascript"></script>
<script>
  $('#my-select').multiSelect({});
</script>
</body>
</html>

我认为你在放置css和js文件时犯了一个小错误。请注意，我删除了JS和CSS文件前面的前导斜杠，它对我来说很好。我假设你有以下目录结构

HTML文件
js / js文件在这里
css / css文件在这里

Answer 2

我发现了我的问题 - 因为我正在使用https://来加载页面。在这种情况下，jQuery的链接也应该是https，否则浏览器会忽略它们：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

感谢Rahul Kadukar和他的回答，指出代码总体上没问题。

jQuery Loudev multiselect不起作用

2 个答案: