将 php 数组显示为下拉复选框

Question

我有一个数组，它是某个函数的输出，数组的大小是动态的。所以，我想把所有数组元素作为下拉框和复选框。有人可以帮忙吗？

Answer 1

<select name="per1" id="per1">
  <option selected="selected">Choose one</option>
  <?php
    foreach($names as $name) { ?>
      <option value="<?= $name['name'] ?>"><?= $name['name'] ?></option>
  <?php
    } ?>
</select>

$names 是你的示例数组。

也检查这个链接

How to create checkbox inside dropdown?

Answer 2

注意

好的，我可以为您提供一个伪代码来帮助您入门。我从我自己的 Web 服务器中借用了我的代码以及来自 CodePen 的代码。请注意，我没有测试代码，所以请随意修改代码。

代码

PHP

<div class="dropdown" data-control="checkbox-dropdown">
  <label class="dropdown-label">Select categories.</label>
  
  <ul class="article-category-list dropdown-list">
    <?php if(count($categories) > 0) {
          foreach ($categories as $category) { ?>
    <li class="article-category-listitem dropd-wn-listoption">
      <input name="cbcategories[]"
        id="cb<?=$category["CategoryID"] ?>" type="checkbox"
        class="article-list-cb"
        value="<?=$category['CategoryID'] ?>" />
      <label class="article-list-lbl"
             for="cb<?=$category["CategoryID"] ?>">
        <?=$category['CategoryName'] ?>
      </label>
    </li>
    <?php }} ?>
  </ul>
</div>

这是从我博客的管理部分借来的一段代码，我已经很长时间没有涉足网站开发了。

所以$categories 变量是博客的类别列表。如果 $categories 数组大于 0，PHP 将遍历 $categories 并在无序列表中写出 HTML 代码，其中包含类别的 ID 和名称。

CSS

（借自 CodePen）

.dropdown {
  position: relative;
  font-size: 14px;
  color: #333;

  .dropdown-list {
    padding: 12px;
    background: #fff;
    position: absolute;
    top: 30px;
    left: 2px;
    right: 2px;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .15);
    transform-origin: 50% 0;
    transform: scale(1, 0);
    transition: transform .15s ease-in-out .15s;
    max-height: 66vh;
    overflow-y: scroll;
  }
  
  .dropdown-option {
    display: block;
    padding: 8px 12px;
    opacity: 0;
    transition: opacity .15s ease-in-out;
  }
  
  .dropdown-label {
    display: block;
    height: 30px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px 12px;
    line-height: 1;
    cursor: pointer;
    
    &:before {
      content: '▼';
      float: right;
    }
  }
  
  &.on {
   .dropdown-list {
      transform: scale(1, 1);
      transition-delay: 0s;
      
      .dropdown-option {
        opacity: 1;
        transition-delay: .2s;
      }
    }
    
    .dropdown-label:before {
      content: '▲';
    }
  }
  
  [type="checkbox"] {
    position: relative;
    top: -1px;
    margin-right: 4px;
  }
}

在我看来，“&.on”类是在打开下拉菜单时使用的。

jQuery

​​>

现在这段代码是 jQuery 格式的。如果你想要纯 JavaScript 代码，请告诉我。

(function($) {
  var CheckboxDropdown = function(el) {
    var _this = this;
    this.isOpen = false;
    this.areAllChecked = false;
    this.$el = $(el);
    this.$label = this.$el.find('.dropdown-label');
    this.$checkAll = this.$el.find('[data-toggle="check-all"]').first();
    this.$inputs = this.$el.find('[type="checkbox"]');
    
    this.onCheckBox();
    
    this.$label.on('click', function(e) {
      e.preventDefault();
      _this.toggleOpen();
    });
    
    this.$checkAll.on('click', function(e) {
      e.preventDefault();
      _this.onCheckAll();
    });
    
    this.$inputs.on('change', function(e) {
      _this.onCheckBox();
    });
  };
  
  CheckboxDropdown.prototype.onCheckBox = function() {
    this.updateStatus();
  };
  
  CheckboxDropdown.prototype.updateStatus = function() {
    var checked = this.$el.find(':checked');
    
    this.areAllChecked = false;
    this.$checkAll.html('Check All');
    
    if(checked.length <= 0) {
      this.$label.html('Select Options');
    }
    else if(checked.length === 1) {
      this.$label.html(checked.parent('label').text());
    }
    else if(checked.length === this.$inputs.length) {
      this.$label.html('All Selected');
      this.areAllChecked = true;
      this.$checkAll.html('Uncheck All');
    }
    else {
      this.$label.html(checked.length + ' Selected');
    }
  };
  
  CheckboxDropdown.prototype.onCheckAll = function(checkAll) {
    if(!this.areAllChecked || checkAll) {
      this.areAllChecked = true;
      this.$checkAll.html('Uncheck All');
      this.$inputs.prop('checked', true);
    }
    else {
      this.areAllChecked = false;
      this.$checkAll.html('Check All');
      this.$inputs.prop('checked', false);
    }
    
    this.updateStatus();
  };
  
  CheckboxDropdown.prototype.toggleOpen = function(forceOpen) {
    var _this = this;
    
    // The dropdown menu is opened.
    if(!this.isOpen || forceOpen) {
       this.isOpen = true;
       this.$el.addClass('on');
      $(document).on('click', function(e) {
        if(!$(e.target).closest('[data-control]').length) {
         _this.toggleOpen();
        }
      });
    }
    else {
      // The dropdown menu is closed.
      this.isOpen = false;
      this.$el.removeClass('on');
      $(document).off('click');
    }
  };
  
  var checkboxesDropdowns = document.querySelectorAll('[data-control="checkbox-dropdown"]');
  for(var i = 0, length = checkboxesDropdowns.length; i < length; i++) {
    new CheckboxDropdown(checkboxesDropdowns[i]);
  }
})(jQuery);

我不知道为什么需要一个“_this”变量，而且我不是 CSS 专家关于使用“&”字符如“&.on”（在我看来像一个嵌套类或一些东西），但至少我可以提供帮助。

这是从 CodePen 借来的代码的来源（一些来自 HTML，例如dropdown-list）： https://codepen.io/RobotsPlay/pres/pyNLdL

美国东部时间凌晨 2:15 更新：

作为后备方案，对于那些关闭 JavaScript 或在 Firefox 中使用 NoScript 扩展来安全浏览网页的人，您可能只想提供一个简单的 <select><option>...</option></select> 代码，如 Tejas kothari 的回答所提供的，并将其包装在<noscript>...</noscript> 标签。

<noscript> 标签示例：

<noscript>
  <label for="categories_noscript">
    Categories:
  </label>
  <p>In Windows/Linux, do Ctrl+click or in macOS, do Cmd+click to select
     more than one.</p>
  <select name="categories_noscript[]" id="categories_noscript">
    <option selected="selected">Choose one or more categories</option>
    <?php if(count($categories) > 0) {
          foreach($categories as $category) { ?>
    <option value="<?=$category['CategoryID'] ?>">
      <?=$category['CategoryName'] ?>
    </option>
  </select>
</noscript>

它不是上面代码中提供的下拉组合框，但至少人们可以提交禁用 JavaScript 的表单。