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

Do you have this block in a string? Did you try to write something yourself? — Dekel, Dec 23 '16 at 14:59
@GroupOfOceninfo care to explain why change the accepted answer? The current accepted answer don't give the correct solution. It doesn't include the `checkbox` (only the ability to select multiple options, but that wasn't the question). If someone will find this question in the future - the current accepted answer doesn't give the correct solution. — Dekel, Dec 26 '16 at 12:50
@Dekel your answer is the perfect match for the solution, it's also converting dropdown into the checkbox as well but when selecting checkbox sorting functionality is not working. So, What I am thinking is for the dropdown with checkbox will be the best solution. Can you please help me to apply checkbox into the same dropdown menu because when I have tried another solution it's not giving checkbox but functionality is working. Still looking for final answer. Thank you for explaining me in detail about solution and selection, I am new to this platform. — Group Of Oceninfo, Dec 27 '16 at 05:53
I'm not so sure I understand the part regarding the sorting (and it wasn't part of the original question). — Dekel, Dec 27 '16 at 12:45

score 2 · Answer 1 · answered Dec 23 '16 at 15:11

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>

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, Dec 24 '16 at 03:51
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 :) — Dekel, Dec 24 '16 at 15:42
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, Dec 25 '16 at 04:38

shokulei · Accepted Answer · 2017-01-09T15:00:37.307

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>

edited Jan 09 '17 at 15:00

answered Dec 23 '16 at 15:15

shokulei

85
7

Thank you for your response, If option 1 is not gonna work then I am going to use this option as a secondary option – Group Of Oceninfo Dec 24 '16 at 03:55
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. – Group Of Oceninfo Dec 26 '16 at 04:05
I updated the code to use a jQuery plugin (https://github.com/nobleclem/jQuery-MultiSelect) that I have used in the past. Hope this is what you are looking for. – shokulei Jan 03 '17 at 19:59
Thank you for the answer perfect match what I am looking for. – Group Of Oceninfo Jan 06 '17 at 03:34
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? – Group Of Oceninfo Jan 09 '17 at 05:21
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. – shokulei Jan 09 '17 at 18:03

benefits · Answer 3 · 2019-02-14T12:35:20.527

1

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

edited Feb 14 '19 at 12:35

answered Feb 14 '19 at 12:23

benefits

31
4

How to convert select dropdown to Multiple Checkbox?

3 Answers3

Linked