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 exmple

<form action="" >
<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>

CodePudding user response：

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 ></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"  multiple>
    <option>Java</option>
    <option>Javascript</option>
    <option>PHP</option>
    <option>Visual Basic</option>
</select>