display php array as dropdown checkbox - php

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.