phphtmljqueryajax

Convert jquery dropdown into checkbox feature


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>

Solution

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

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