我正在使用以下代碼來顯示搜索結果。它有兩個選項，一個是文本欄位，另一個是下拉選擇選項。我想將下拉欄位轉換為復選框選項，并允許用戶一次選擇多個選項。我怎樣才能做到這一點？
<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>
uj5u.com熱心網友回復：
根據您的查詢，有很多可用的東西。我用過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 hljs-title function_">data('icon') '"></i> ' icon.text '<span >' 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497879.html