如何将选择下拉列表转换为多个复选框？答案

【问题标题】：How to convert select dropdown to Multiple Checkbox?如何将选择下拉列表转换为多个复选框？
【发布时间】：2017-05-09 06:53:24
【问题描述】：

我想将下面的下拉代码转换为多选复选框值。我正在使用 wordpress，下面的代码来自第三方网站。我无权访问该第三方网站。所以，有了这个功能，我可以在它自己的下拉菜单中提供多选选项。

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

寻找一些使用 WordPress 的解决方案，我可以在 DOM 就绪后更改第三方代码并在多个复选框中更改代码

【问题讨论】：

你在字符串中有这个块吗？你有没有尝试自己写一些东西？
@GroupOfOceninfo 关心解释为什么更改接受的答案？当前接受的答案没有给出正确的解决方案。它不包括checkbox（只有选择多个选项的能力，但这不是问题）。如果将来有人会发现这个问题 - 当前接受的答案没有给出正确的解决方案。
@Dekel 您的答案是解决方案的完美匹配，它也将下拉列表转换为复选框，但是在选择复选框排序功能时不起作用。所以，我在想的是带有复选框的下拉菜单将是最好的解决方案。您能帮我将复选框应用到同一个下拉菜单中吗，因为当我尝试另一种解决方案时，它没有提供复选框，但功能正在运行。仍在寻找最终答案。感谢您详细解释我的解决方案和选择，我是这个平台的新手。
我不太确定我是否理解有关排序的部分（这不是原始问题的一部分）。

标签： php jquery wordpress checkbox

【解决方案1】：

这是一个 jquery 示例，说明如何从选择元素构建复选框列表：

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

【讨论】：

感谢您的回答，这正是我想要的，但是当我尝试使用控制台时，它给了我以下错误。 VM794 jquery.min.js:2Uncaught TypeError: 无法在“节点”上执行“appendChild”：参数 1 不是“节点”类型。
不知道为什么会发生（不看你写的代码很难帮助），但我很高兴我能帮助解决问题:)
它工作错误解决了 jquery.min.js 文件没有更新但是当它切换到多个复选框时功能不起作用。我的意思是只有一个功能更改受到影响，它没有提供多个选择功能，有什么建议我该如何解决？

【解决方案2】：

您可以使用 jQuery 来更改选择多个属性。例如：

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

【讨论】：

感谢您的回复，如果选项 1 不起作用，那么我将使用此选项作为辅助选项
我喜欢这个解决方案排序和简单，我们不能在选择元素中添加复选框吗？因此，用户可以勾选该复选框，因为大多数用户不知道如何在没有复选框的情况下选择多个选项。
我更新了代码以使用我过去使用的 jQuery 插件 (github.com/nobleclem/jQuery-MultiSelect)。希望这是您正在寻找的。span>
感谢您完美匹配我正在寻找的答案。
当我使用 $('.facilities').find('select').attr('multiple', true);并选择值是排序但是当我使用 $('.facilities').find('select').multiselect();与上一行排序功能一起没有任何建议？

【解决方案3】：

您可以在引导多选脚本的帮助下完成

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

See Demo

【讨论】：