display php array as dropdown checkbox

Question

I've one array, which is output of some function and size of array is dynamic. So, I want to put all array element as drop-down with checkbox. Can anyone is here to help?

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 is example array take your.

check this link also

How to create checkbox inside dropdown?

Answer 2

Note

Okay, I can provide you a pseudo-code to help get you started. I borrowed my code from my own web server along with code from CodePen. Please note that I did not test the code, so do feel free to modify the code.

Code

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>

This is a code borrowed from the administration portion of my blog that I haven't gotten into website development for a long time.

So the $categories variable is a list of categories for a blog. If the $categories array is greater than 0, PHP will loop through the $categories and will write out HTML code inside an unordered list, which contains the ID and name of the category.

CSS

(Borrowed from 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;
  }
}

It looks to me the "&.on" class is for when dropdown is opened.

jQuery

Now this code is in jQuery format. If you want plain JavaScript code, let me know.

(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);

I'm not sure why a "_this" variable is needed, plus I'm not an expert in CSS regarding the use of "&" character such as "&.on" (looks to me like a nested class or something), but at least I can be of help.

Here's the source of the code borrowed from CodePen (some from HTML such as dropdown-list): https://codepen.io/RobotsPlay/pres/pyNLdL

Update as of 2:15 AM EDT:

As a fallback, for those who turned off JavaScript or is using a NoScript extension in Firefox to browse the web safely, you might want to provide just a simple <select><option>...</option></select> code as provided by Tejas kothari's answer and wrap it in a <noscript>...</noscript> tag.

Example of <noscript> tag:

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

It's not a drop down combo box as provided in the code above, but at least people can submit a form with JavaScript disabled.