<!-- Style -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
// In your Javascript (external.js resource or <script> tag)
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script><html>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example" style="width: 300px">
<option></option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<script>
window.onpageshow = function() {
$('#example').select2({
allowClear: true,
placeholder: 'Select a month'
});
};
</script>
</html>
$(document).ready(function() {
$("#menuOption1").select2({dropdownParent: "#menuOption1-container"});
$("#menuOption2").select2({dropdownParent: "#menuOption2-container"});
});
<span id="menuOption1-container">
<select id="menuOption1">
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
</select>
</span>
<span id="menuOption2-container">
<select id="menuOption2">
<option value="a"> Vowel a </option>
<option value="e"> Vowel e </option>
<option value="i"> Vowel i </option>
<option value="o"> Vowel o </option>
<option value="o"> Vowel u </option>
</select>
</span>
$(".js-example-basic-multiple-limit").select2({
maximumSelectionLength: 3
});#menuOption1-container .select2-results__option--highlighted {
background-color: #50831F !important;
}
#menuOption2-container .select2-results__option--highlighted {
background-color: #28915F !important;
}
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('.js-example-basic-single').select2();
});