HTML: Select multiple items dropdown

Question

HTML: Select multiple items dropdown

2.1k Views Asked by JoseTheChamp At 18 December 2022 at 11:52

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

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?

Original Q&A

There are 4 best solutions below

JoseTheChamp On 18 December 2022 at 14:02

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).

Developer Ali Usman On 23 December 2022 at 04:40

You just have to add attribute of multiple for select list so that it works as a multiple select list.

Below is the sample code for this:

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

Kumar Sinha On 09 October 2023 at 22:06

Try this with jquery:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Select Box With Search Options Example</title>
<style>
    .container { margin: 150px auto; }
  .searchBoxElement{
  background-color: white;
  border: 1px solid #aaa;
  position: absolute;
  max-height: 150px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  line-height: 23px;
  list-style: none;
  z-index: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.searchBoxElement span{
  padding: 0 5px;
}


.searchBoxElement li{
  background-color: white;
  color: black;
}

.searchBoxElement li:hover{
  background-color: #50a0ff;
  color: white;
}

.searchBoxElement li.selected{
  background-color: #50a0ff;
  color: white;
}

.refineText{
  padding: 8px 0 8px 0 !important;
}
</style>
</head>
<body>

  <div class="container">
    <h1>Select Box With Search Options Example</h1>
  <div class="select-wrap">
              <select name="lang" class="js-searchBox" style="width:250px">
                <option value="">Select A Language</option>
                <option value="1">Python</option>
                <option value="2">Java</option>
                <option value="3">Ruby</option>
                <option value="4">C/C++</option>
                <option value="5">C#</option>
                <option value="6">JavaScript</option>
                <option value="7">PHP</option>
                <option value="8">Swift</option>
                <option value="9">Scala</option>
                <option value="10">R</option>
                <option value="11">Go</option>
                <option value="12">VisualBasic.NET</option>
                <option value="13">Kotlin</option>
              </select>
            </div>
          </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
<script src="https://demo.sinhcoms.in/optionSearch/main.js"></script>
<script>
  $('.js-searchBox').searchBox({ elementWidth: '250'});
</script>
</body>
</html>

**Ninja Work** · Accepted Answer · 2022-12-20T18:11:21.793000

It seems you run the this function $(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" }) before loading the library files.

 $(document).ready(function() {   
  $(".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 items dropdown

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in PHP

Related Questions in HTML

Related Questions in JQUERY

Related Questions in JQUERY-CHOSEN

Trending Questions

Popular # Hahtags

Popular Questions