Convert jquery dropdown into checkbox feature - php

Question

I am using the following code to show search results. It has two options, one is a text field and another is a dropdown select option. I would like to convert the dropdown field into a checkbox option and allow users to select more than 1 option at a time. How can I do that?
<script>
$(document).ready(function(){
load_data(1);
function load_data(page,query,city)
{
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{page:page, query:query, city:city},
success:function(data)
{
$('#dynamic_content').html(data);
}
});
}
$(document).on('click', '.page-link', function(){
var page = $(this).data('page_number');
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(page, query, city);
});
$('#search_box').keyup(function () {
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(1, query, city);
});
$('#city_box').change(function () {
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(1, query, city);
});
});
</script>
Current dropdown example:
<form action="" class="row login_form">
<select name="city_box" id="city_box">
<option value="newyork">New York</option>
<option value="london">London</option>
<option value="tokyo">Tokyo</option>
<option value="paris">Paris</option>
</select>
</form>

Answer 1

As per your query there are lot of stuff available. I have used Select2.js. This having so many features. I tried some way to achieve you scenario. Try below code snippet will work for you.
$(function() {
$("#multiple").select2({
closeOnSelect : false,
placeholder : "Placeholder",
allowHtml: true,
allowClear: true,
tags: true
});
});
function iformat(icon, badge,) {
var originalOption = icon.element;
var originalOptionBadge = $(originalOption).data('badge');
return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '<span class="badge">' + originalOptionBadge + '</span></span>');
}
.select2-container {
min-width: 400px;
}
.select2-results__option {
padding-right: 20px;
vertical-align: middle;
}
.select2-results__option:before {
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 2px solid #e9e9e9;
border-radius: 4px;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
}
.select2-results__option[aria-selected=true]:before {
font-family:fontAwesome;
content: "\f00c";
color: #fff;
background-color: #f77750;
border: 0;
display: inline-block;
padding-left: 3px;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #eaeaeb;
color: #272727;
}
.select2-container--default .select2-selection--multiple {
margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #f77750;
border-width: 2px;
}
.select2-container--default .select2-selection--multiple {
border-width: 2px;
}
.select2-container--open .select2-dropdown--below {
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.select2-selection .select2-selection--multiple:after {
content: 'hhghgh';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h3>Multiple Select with Checkboxes</h3>
<select id="multiple" class="js-select2" multiple>
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>