How to convert select dropdown to Multiple Checkbox?

Question

I want to convert below dropdown code into multi select checkbox value. I am using wordpress and below code is coming from third party website. I don't have any access to that third party website. So, with this function I can provide multi select option into the dropdown it self.

<div class="facilities">
   <span class="label">Facilities</span>
   <span class="input">
      <select>
         <option value="">--- All ---</option>
         <option value="39945">Internet</option>
         <option value="39946">Swimming Pool</option>
         <option value="39947">Beach</option>
         <option value="39948">B&B</option>
         <option value="39949">Restaurant</option>
      </select>
   </span>
</div>

Looking for some solution with WordPress where I can change third party code after DOM Ready and change the code in multiple checkbox

Solution 1

You can use jQuery to change the select multiple attribute. For example:

$(function() {
  // from http://stackoverflow.com/questions/45888/what-is-the-most-efficient-way-to-sort-an-html-selects-options-by-value-while
  var my_options = $('.facilities select option');
  var selected = $('.facilities').find('select').val();

  my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    if (a.text < b.text) return -1;
    return 0
  })

  $('.facilities').find('select').empty().append( my_options );
  $('.facilities').find('select').val(selected);
  
  // set it to multiple
  $('.facilities').find('select').attr('multiple', true);
  
  // remove all option
  $('.facilities').find('select option[value=""]').remove();
  // add multiple select checkbox feature.
  $('.facilities').find('select').multiselect();
})

<link rel="stylesheet" type="text/css" href="https://rawgit.com/nobleclem/jQuery-MultiSelect/master/jquery.multiselect.css" />

<div class="facilities">
    <span class="label">Facilities</span>
    <span class="input">
        <select>
           <option value="">--- All ---</option>
           <option value="39945">Internet</option>
           <option value="39946">Swimming Pool</option>
           <option value="39947">Beach</option>
           <option value="39948">B&B</option>
           <option value="39949">Restaurant</option>
        </select>
    </span>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://rawgit.com/nobleclem/jQuery-MultiSelect/master/jquery.multiselect.js"></script>

Solution 2

Here is a jquery example of how to build a list of checkboxs from a select element:

$(function() {
  chk = $('.facilities option').map(function() {
    i = $('<input type="checkbox">');
    i.attr('value', $(this).attr('value'));
    l = $('<label>')
    l.append(i)
    l.append($(this).text());
    return l;
  });
  console.log(chk);
  $('.facilities select').replaceWith(chk.get());
});

.facilities-original, .facilities {
  border: 1px solid green;
  margin: 10px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="facilities-original">
   <span class="label">Facilities</span>
   <span class="input">
      <select>
         <option value="">--- All ---</option>
         <option value="39945">Internet</option>
         <option value="39946">Swimming Pool</option>
         <option value="39947">Beach</option>
         <option value="39948">B&B</option>
         <option value="39949">Restaurant</option>
      </select>
   </span>
</div>

<div class="facilities">
   <span class="label">Facilities</span>
   <span class="input">
      <select>
         <option value="">--- All ---</option>
         <option value="39945">Internet</option>
         <option value="39946">Swimming Pool</option>
         <option value="39947">Beach</option>
         <option value="39948">B&B</option>
         <option value="39949">Restaurant</option>
      </select>
   </span>
</div>

Solution 3

You can accomplish with the help of bootstrap multiselect script

<link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">

See Demo

Comments

[Group Of Oceninfo]

Thank you for your answer, This is the exact thing what I want but when I have tried using console it's giving me below errors. VM794 jquery.min.js:2Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

[Group Of Oceninfo]

Thank you for your response, If option 1 is not gonna work then I am going to use this option as a secondary option

[Dekel]

Not sure why it happen (without looking at the code you wrote it's hard to help) but I'm glad I could help with the solution :)

[Group Of Oceninfo]

it works error solved jquery.min.js file was not updated but when it switching in multiple checkbox functionality is not working. I mean only one function changes are getting affected it's not giving multiple selecting function, Any suggestion How I can solve it?

[Group Of Oceninfo]

I like this solution sort and simple, Can't we add checkbox inside select element ? So, user can tick that checkbox because most of the user don't know how to select multiple option without checkbox.

[shokulei]

I updated the code to use a jQuery plugin (github.com/nobleclem/jQuery-MultiSelect) that I have used in the past. Hope this is what you are looking for.

[Group Of Oceninfo]

Thank you for the answer perfect match what I am looking for.

[Group Of Oceninfo]

When I use $('.facilities').find('select').attr('multiple', true); and selecting value it's sorting but when I am using $('.facilities').find('select').multiselect(); along with previous line sorting function is not working any suggestion?

[shokulei]

The plugin will just take whatever order comes from the HTML. And unfortunately, the plugin itself doesn't provide a sorting option. Maybe you can create an issue in the github or fork it to add the sorting :). But I added a example I found on another post to sort the list first. It is not the best solution.