How to Change Normal Select to Chosen Select Box with Search Option – Solution: Chosen and Multiple Chosen with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow
Live Demo
Also Helpful –
Responsive Header Navigation Menu
How to Change Normal Select to Chosen Select Box with Search Option
Chosen is the jQuery plugin developed by harvesthq. If you are new and go harvesthq GitHub page try to implement the plugin it very hard to understand. That’s why we simplify and modified the code and post those code which is easily understood.
Back to coding, You just need to include two JavaScript files and one CSS file to complete the Chosen Select Box integration. Here use the HTML page to view the Chosen Select Box. That’s why we create an index.html and code it over here.
How to set Chosen in Select Box?
Via Class-
$(‘.chosen’).chosen({no_results_text: “Oops, nothing found!”,});
Via ID-
$(‘#chosen’).chosen({no_results_text: “Oops, nothing found!”,});
index.html
Create an HTML file named ‘index.html‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<!-- Coding Debugging (https://codingdebugging.com) --> <!DOCTYPE html> <html lang="en"> <head> <title>Chosen/Multiple Chosen - Coding Debugging</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/996973c893.js" crossorigin="anonymous"></script> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <!-- Chosen CSS --> <link rel="stylesheet" href="include/chosen.css"> <!-- My Stylesheet --> <style type="text/css"> body { font-family: "Baloo Thambi 2", cursive; } </style> </head> <body> <div class="container-fluid bg-light p-5 text-center my-3"> <h2 class="">Chosen/Multiple Chosen</h1> <h5 class="text-muted">Charge Normal Select Box to Chosen Box with Search Option.</h5> </div> <div class="container bg-light p-3 my-5"> <div class="card-body"> <form action="index.php" method="post" class="form-group"> <div class="row"> <div class="col-md-12"> <button class="btn btn-dark">Chosen</button> </div> </div> <br> <div class="row mb-3"> <div class="col-md-5"> <select name="chosen" id="chosen" class="form-control"> <option value="Iceland">Iceland</option> <option value="Indonesia">Indonesia</option> <option value="India">India</option> <option value="Iran">Iran</option> <option value="Iraq">Iraq</option> <option value="Ireland">Ireland</option> <option value="Isle of Man">Isle of Man</option> <option value="Israel">Israel</option> <option value="Italy">Italy</option> </select> </div> <div class="col-md-2"> To <i class="fas fa-arrow-right"></i> </div> <div class="col-md-5"> <select name="chosen" id="chosen" class="form-control chosen"> <option value="Iceland">Iceland</option> <option value="Indonesia">Indonesia</option> <option value="India">India</option> <option value="Iran">Iran</option> <option value="Iraq">Iraq</option> <option value="Ireland">Ireland</option> <option value="Isle of Man">Isle of Man</option> <option value="Israel">Israel</option> <option value="Italy">Italy</option> </select> </div> </div> <div class="row"> <div class="col-md-12"> <button class="btn btn-dark">Multiple Chosen</button> </div> </div> <br> <div class="row mb-3"> <div class="col-md-5"> <select name="chosen" id="chosen" class="form-control" multiple=""> <option value="Afganistan">Afghanistan</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> <option value="American Samoa">American Samoa</option> <option value="Andorra">Andorra</option> <option value="Angola">Angola</option> <option value="Anguilla">Anguilla</option> <option value="Antigua & Barbuda">Antigua & Barbuda</option> <option value="Argentina">Argentina</option> <option value="Armenia">Armenia</option> <option value="Aruba">Aruba</option> <option value="Australia">Australia</option> <option value="Austria">Austria</option> <option value="Azerbaijan">Azerbaijan</option> </select> </div> <div class="col-md-2"> To <i class="fas fa-arrow-right"></i> </div> <div class="col-md-5"> <select name="chosen" id="chosen" class="form-control chosen" multiple=""> <option value="Afganistan">Afghanistan</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> <option value="American Samoa">American Samoa</option> <option value="Andorra">Andorra</option> <option value="Angola">Angola</option> <option value="Anguilla">Anguilla</option> <option value="Antigua & Barbuda">Antigua & Barbuda</option> <option value="Argentina">Argentina</option> <option value="Armenia">Armenia</option> <option value="Aruba">Aruba</option> <option value="Australia">Australia</option> <option value="Austria">Austria</option> <option value="Azerbaijan">Azerbaijan</option> </select> </div> </div> </form> </div> </div> <!-- JavaScript for Chosen --> <script src="include/chosen.jquery.js" type="text/javascript"></script> <script src="include/prism.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //For Class $('.chosen').chosen({no_results_text: "Oops, nothing found!",}); //For ID /*$('#chosen').chosen({no_results_text: "Oops, nothing found!",});*/ </script> </body> </html> |
Thank you for visiting!
We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.
Keep coding, Keep debugging!