HTML: Select multiple items dropdown-CodePudding

I found following code here on 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  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>

In this question: HTML: Select multiple as dropdown

But my implementation does not work.

I copied code above (without the first part $) and pasted it (without modification) in my .php page. Then i tried to run the code but my output looks like this.

My output

I do not include any other libraries or other codes apart from the three within the code snippet. What should i do in order for it to work?

CodePudding user response：

It looks like you are trying to use the jQuery chosen plugin to create a multi-select dropdown list in your HTML page.

To use the chosen plugin, you need to include the jQuery library and the chosen plugin files in your HTML page. The code you posted includes the necessary links to these files at the top:

<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"/>

Make sure that these links are correct and that they are placed in the correct location in your HTML page (before the script that initializes the chosen plugin).

It's also important to note that the $ symbol in the first line of code you posted is the jQuery function. This line of code initializes the chosen plugin on the select element with the class chosen-select.

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

If you are not already using jQuery in your project, you will need to include it in order for this code to work.

CodePudding user response：

So to resolve the issue I had to add the

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

into script tag and now it started to work. (i ignored it before, thinking it did not have effect in a sence working/not working).