javascript - 我无法使多选框工作

Question

我似乎无法做到这一点plugin才能正常工作。该文档有点困惑。

这是我正在处理的网站“http://smartbin.launchlabs.asia/ ”，这是我的代码的 jsfiddle jsfiddle.net/7Ljq2/。

<select multiple id = "zipcode" style = "height:auto;">
<optgroup label="Brighton Council">
    <option value = "BC">Brighton 3186</option>
    <option value = "BC">Brighton East 3187</option>
    <option value = "BC">East Brighton 3187</option>
    <option value = "BC">East Hampton 3188</option>
    <option value = "BC">Hampton 3188</option>
    <option value = "BC">Hampton East 3188</option>
    <option value = "BC">Highett 3190</option>
    <option value = "BC">Sandringham 3191</option>
    <option value = "BC">Beaumaris 3193</option>
    <option value = "BC">Cheltenham 3192</option>
    <option value = "BC">Black Rock 3193</option>
    <option value = "BC">Mentone 3194</option>
</optgroup>
</select>

这是在 head 标签内

      <link href="/select2.css" rel="stylesheet"/>
  <script src="/select2.js"></script>

  <script>
        $(document).ready(function() {

          $("#zipcode").select2(); 

        });
  </script> 

我可能错过了一些非常明显的事情。我真的需要这方面的帮助。谢谢。

Answer 1

我已经用我看到的问题更新了您的 jsfiddle 示例。

工作示例:http://jsfiddle.net/7Ljq2/1/

一些事情:

• 您必须包含外部资源(JS、CSS)。
• 您必须包含 jQuery，因为您正在使用的插件需要它。
• JS 代码应该运行 onDomReady 而不是 onLoad。
• 选择不需要 style 或 multiple 属性。

大多数选项都在 jsfiddle 界面的左侧菜单中配置。

HTML:

<select id="zipcode">
    <option value = "BC">Brighton 3186</option>
    <option value = "BC">Brighton East 3187</option>
    <option value = "BC">East Brighton 3187</option>
    <option value = "BC">East Hampton 3188</option>
    <option value = "BC">Hampton 3188</option>
    <option value = "BC">Hampton East 3188</option>
    <option value = "BC">Highett 3190</option>
    <option value = "BC">Sandringham 3191</option>
    <option value = "BC">Beaumaris 3193</option>
    <option value = "BC">Cheltenham 3192</option>
    <option value = "BC">Black Rock 3193</option>
    <option value = "BC">Mentone 3194</option>
</select>

JS:

$("#zipcode").select2();