将jquery下拉菜单转换为复选框功能

Question

我使用以下代码来显示搜索结果。它有两个选项，一个是文本字段，另一个是下拉选择选项。我想将下拉字段转换为复选框选项，并允许用户一次选择超过1个选项。我该怎么做呢?

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

当前下拉列表示例:

<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

根据您的查询，有很多可用的东西。我使用了Select2.js． 它有很多功能。我尝试了一些方法来实现你的设想。尝试下面的代码片段将为您工作。

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