HTML：選擇多個項目下拉

Question

我在 Stack Overflow 上找到了以下代碼。

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<form action="http://httpbin.org/post" method="post">
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
  <input type="submit">
</form>

在這個問題中： HTML: Select multiple as dropdown

但是我的實現不起作用。

我復制了上面的代碼（沒有第一部分 $）並將其粘貼（沒有修改）到 my.php 頁面中。 然后我嘗試運行代碼，但我的輸出看起來像這樣。

我的輸出

除了代碼片段中的三個之外，我不包含任何其他庫或其他代碼。 我應該怎么做才能讓它發揮作用？

Answer 1

您只需為選擇列表添加多個屬性，以便它可以用作多選列表。

以下是此示例代碼：

<select multiple id="select">
    <option>Opt. 1</option>
    <option>Opt. 2</option>
    <option>Opt. 3</option>
</select>

Answer 2

所以要解決這個問題，我必須添加

    $(".chosen-select").chosen({
      no_results_text: "Oops, nothing found!"
    })

進入腳本標簽，現在它開始工作了。 （我之前忽略了它，認為它在工作/不工作的意義上沒有影響）。

Answer 3

看來你在加載庫文件之前運行了這個函數$(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" }) 。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<form action="http://httpbin.org/post" method="post">
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
  <input type="submit">
</form>
<script>
 $(document).ready(function() {   
  $(".chosen-select").chosen({
     no_results_text: "Oops, nothing found!"
   })
 });
</script>