Skip to content

Instantly share code, notes, and snippets.

@daltonnyx

daltonnyx/example.html

Created June 29, 2017 18:32
Show Gist options
  • Save daltonnyx/1539a9829a83568fdff6f4565219422b to your computer and use it in GitHub Desktop.
Save daltonnyx/1539a9829a83568fdff6f4565219422b to your computer and use it in GitHub Desktop.
Download ZIP
jQuery quyDowndown
Raw
example.html
<div class="dropdown-select">
<span class="placeholder">--Chọn nhóm--</span>
<ul class="dropdown nhom-multiple">
<li class="level-1">
<span class="group-caption">
<input type="checkbox" value="15" class="group-checkbox"> Trung tâm Điều hành thông tin</span>
<ul class="sub-option">
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="84" class="group-checkbox"> Đài OMC</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="1" class="nhom-checkbox">
<span class="option-name">OCB Đài Phát - OMC-TTĐH</span>
</li>
<li>
<input type="checkbox" value="2" class="nhom-checkbox">
<span class="option-name">OCB Hòa Khánh - OMC-TTĐH</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="86" class="group-checkbox"> Đội Bảo dưỡng, lắp đặt</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="3" class="nhom-checkbox">
<span class="option-name">BDLĐ1 - BDLĐ-TTĐH</span>
</li>
<li>
<input type="checkbox" value="4" class="nhom-checkbox">
<span class="option-name">BDLĐ2 - BDLĐ-TTĐH</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="level-1">
<span class="group-caption">
<input type="checkbox" value="24" class="group-checkbox"> Trung tâm viễn thông 1</span>
<ul class="sub-option">
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="66" class="group-checkbox"> Tổ KTVT1</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="5" class="nhom-checkbox">
<span class="option-name">Trần Phú - Tổ 1 - TTVT1</span>
</li>
<li>
<input type="checkbox" value="6" class="nhom-checkbox">
<span class="option-name">Ông Ích Khiêm - Tổ 1 - TTVT1</span>
</li>
<li>
<input type="checkbox" value="7" class="nhom-checkbox">
<span class="option-name">Lê Lợi - Tổ 1 - TTVT1</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="67" class="group-checkbox"> Tổ KTVT2</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="8" class="nhom-checkbox">
<span class="option-name">Trưng Nữ Vương - Tổ 2 - TTVT1</span>
</li>
<li>
<input type="checkbox" value="9" class="nhom-checkbox">
<span class="option-name">Trần Quốc Toản - Tổ 2 - TTVT1</span>
</li>
<li>
<input type="checkbox" value="10" class="nhom-checkbox">
<span class="option-name">Hoàng Diệu - Tổ 2 - TTVT1</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="68" class="group-checkbox"> Tổ KTVT3</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="11" class="nhom-checkbox">
<span class="option-name">Duy Tân- Tổ 3 - TTVT1</span>
</li>
<li>
<input type="checkbox" value="12" class="nhom-checkbox">
<span class="option-name">2/9 - Tổ 3 - TTVT1</span>
</li>
<li>
<input type="checkbox" value="13" class="nhom-checkbox">
<span class="option-name">Hòa Cường - Tổ 3 - TTVT1</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="level-1">
<span class="group-caption">
<input type="checkbox" value="25" class="group-checkbox"> Trung tâm viễn thông 2</span>
<ul class="sub-option">
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="61" class="group-checkbox"> Tổ KTVT1</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="16" class="nhom-checkbox">
<span class="option-name">Hải Phòng - Tổ 1 - TTVT2</span>
</li>
<li>
<input type="checkbox" value="17" class="nhom-checkbox">
<span class="option-name">ĐN2 - Tổ 1 - TTVT2</span>
</li>
<li>
<input type="checkbox" value="18" class="nhom-checkbox">
<span class="option-name">Phước Tường - Tổ 1 - TTVT2</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="62" class="group-checkbox"> Tổ KTVT2</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="19" class="nhom-checkbox">
<span class="option-name">Đông Tây - Tổ 2 - TTVT2</span>
</li>
<li>
<input type="checkbox" value="20" class="nhom-checkbox">
<span class="option-name">Trần Cao Vân - Tổ 2 - TTVT2</span>
</li>
<li>
<input type="checkbox" value="21" class="nhom-checkbox">
<span class="option-name">NTPhương - Tổ 2 - TTVT2</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="level-1">
<span class="group-caption">
<input type="checkbox" value="26" class="group-checkbox"> Trung tâm viễn thông 3</span>
<ul class="sub-option">
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="80" class="group-checkbox"> Tổ KTVT1</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="22" class="nhom-checkbox">
<span class="option-name">Mân Thái - Tổ 1 - TTVT3</span>
</li>
<li>
<input type="checkbox" value="23" class="nhom-checkbox">
<span class="option-name">Vũng Thùng - Tổ 1 - TTVT3</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="81" class="group-checkbox"> Tổ KTVT2</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="24" class="nhom-checkbox">
<span class="option-name">Phước Mỹ, An Đồn - Tổ 2 - TTVT3</span>
</li>
<li>
<input type="checkbox" value="25" class="nhom-checkbox">
<span class="option-name">An Trung, ĐHKT - Tổ 2 - TTVT3</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="82" class="group-checkbox"> Tổ KTVT3</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="26" class="nhom-checkbox">
<span class="option-name">Bắc Mỹ An - Tổ 3 - TTVT3</span>
</li>
<li>
<input type="checkbox" value="27" class="nhom-checkbox">
<span class="option-name">Hòa Hải, Non Nước - Tổ 3 - TTVT3</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="level-1">
<span class="group-caption">
<input type="checkbox" value="27" class="group-checkbox"> Trung tâm viễn thông 4</span>
<ul class="sub-option">
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="56" class="group-checkbox"> Tổ KTVT1</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="28" class="nhom-checkbox">
<span class="option-name">Cẩm Lệ, Hòa Xuân - Tổ 1 - TTVT4</span>
</li>
<li>
<input type="checkbox" value="29" class="nhom-checkbox">
<span class="option-name">Khuê Trung - Tổ 1 - TTVT4</span>
</li>
<li>
<input type="checkbox" value="30" class="nhom-checkbox">
<span class="option-name">Lê Độ - Tổ 1 - TTVT4</span>
</li>
<li>
<input type="checkbox" value="31" class="nhom-checkbox">
<span class="option-name">Hòa Cầm - Tổ 1 - TTVT4</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="57" class="group-checkbox"> Tổ KTVT2</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="32" class="nhom-checkbox">
<span class="option-name">Hòa Khương - Tổ 2 - TTVT4</span>
</li>
<li>
<input type="checkbox" value="33" class="nhom-checkbox">
<span class="option-name">Hòa Nhơn, Hòa Phú - Tổ 2 - TTVT4</span>
</li>
<li>
<input type="checkbox" value="34" class="nhom-checkbox">
<span class="option-name">Hòa Phong - Tổ 2 - TTVT4</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="58" class="group-checkbox"> Tổ KTVT3</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="35" class="nhom-checkbox">
<span class="option-name">Hòa Tiến, Hòa Thọ - Tổ 3 - TTVT4</span>
</li>
<li>
<input type="checkbox" value="36" class="nhom-checkbox">
<span class="option-name">Miếu Bông - Tổ 3 - TTVT4</span>
</li>
<li>
<input type="checkbox" value="37" class="nhom-checkbox">
<span class="option-name">Hòa Phước - Tổ 3 - TTVT4</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="level-1">
<span class="group-caption">
<input type="checkbox" value="28" class="group-checkbox"> Trung tâm viễn thông 5</span>
<ul class="sub-option">
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="74" class="group-checkbox"> Tổ KTVT1</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="38" class="nhom-checkbox">
<span class="option-name">Hòa Minh 1,2,3 - Tổ 1 - TTVT5</span>
</li>
<li>
<input type="checkbox" value="39" class="nhom-checkbox">
<span class="option-name">Phú Lộc - Tổ 1 - TTVT5</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="75" class="group-checkbox"> Tổ KTVT2</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="40" class="nhom-checkbox">
<span class="option-name">Hòa Khánh - Tổ 2 - TTVT5</span>
</li>
<li>
<input type="checkbox" value="41" class="nhom-checkbox">
<span class="option-name">Xuân Thiều, Liên Chiểu - Tổ 2 - TTVT5</span>
</li>
</ul>
</li>
<li class="level-2">
<span class="group-caption"><input type="checkbox" value="76" class="group-checkbox"> Tổ KTVT3</span>
<ul class="sub-option">
<li>
<input type="checkbox" value="42" class="nhom-checkbox">
<span class="option-name">Thanh Vinh, Hòa Liên, Hòa Bắc - Tổ 3 - TTVT5</span>
</li>
<li>
<input type="checkbox" value="43" class="nhom-checkbox">
<span class="option-name">Bà Nà, Hòa Sơn, Hòa Ninh - Tổ 3 - TTVT5</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Raw
jquery.quydowndown.js
if(jQuery != undefined) {
jQuery.fn.quyDropdown = function( options ) {
var updateDropdownText = function() {
var nhomCheckedSpan = Array.prototype.slice.call(document.querySelectorAll('.nhom-checkbox:checked + span'));
if(nhomCheckedSpan.length == 0) {
$(".dropdown-select .placeholder").text("--Chọn nhóm--");
return;
}
var placeholderText = nhomCheckedSpan.map(function(el) { return el.textContent}).join(', ');
$(".dropdown-select .placeholder").text(placeholderText);
}
var getData = function() {
var nhomCheckedSpan = Array.prototype.slice.call(document.querySelectorAll('.nhom-checkbox:checked'));
var data = [];
nhomCheckedSpan.forEach(function(el) {
data.push({
id: el.value,
title: el.nextElementSibling.textContent
});
});
console.log(data);
return data;
}
if(options == "getdata") {
return getData();
}
return this.each(function(){
var $this = jQuery(this);
var dropDown = this;
jQuery(document).on("click", ".dropdown-select.dropped",function(e) {
if( e.target.className.indexOf("dropdown") != -1 &&
e.currentTarget.className.indexOf("dropped") != -1 )
jQuery(e.currentTarget).removeClass("dropped");
});
$this.on("click", function(e) {
if( e.target.className.indexOf("dropdown-select") != -1 ||
e.target.className.indexOf("placeholder") != -1 )
$this.toggleClass("dropped");
});
$this.on("click", ".group-caption", function(e){
if(e.originalEvent.srcElement.tagName == "INPUT") return;
jQuery(e.currentTarget).closest("li").toggleClass("uncollapsed");
});
$this.on("change", ".group-caption input",function(e){
if(e.currentTarget.checked)
jQuery(e.currentTarget).closest("li").find('input[type="checkbox"]').attr("checked","checked");
else
jQuery(e.currentTarget).closest("li").find('input[type="checkbox"]').removeAttr("checked");
updateDropdownText();
});
$this.on("change", ".nhom-checkbox", function(e){
updateDropdownText();
});
});
};
}
Raw
quydowndown.css
.dropdown-select {
position: relative;
line-height: 2em;
display:inline-block;
width: 200px;
border: 1px solid #ccc;
padding: 2px 5px;
color: #666;
cursor: pointer;
border-radius: 5px;
box-shadow: inset 0px 0px 2px 0px #eee;
vertical-align: middle;
}
.dropdown-select.dropped:before {
position: fixed;
content: " ";
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.dropdown-select .placeholder {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 1.5em;
width: calc(100% - 1.5em);
display: inline-block;
}
.dropdown-select .placeholder:after {
content: "\f078";
font-family: FontAwesome;
color: #666;
position: absolute;
right: 5px;
top: 50%;
font-size: 14px;
transform: translateY(-50%);
transition: .3s linear all;
}
.dropdown-select.dropped .placeholder:after {
transform: translateY(-50%) rotate(180deg);
}
.dropdown-select > ul {
position: absolute;
transition: .3s ease-in-out all;
transform: scaleY(0);
width: 250px;
background: #fff;
left: 0;
padding: 7px;
box-shadow: inset 0px -2px 2px 0px #ddd;
border: 1px solid #ccc;
z-index: 99;
}
.dropdown-select .group-caption {
font-weight:bold;
font-size: 13px;
}
.dropdown-select .group-caption:before {
content: "\f196";
font-family: FontAwesome;
font-size: 15px;
font-weight: bold;
margin-right: 5px;
}
.dropdown-select > ul ul {
height: 0;
padding-left: 10px;
}
.dropdown-select > ul li.uncollapsed > ul {
height: auto;
}
.dropdown-select > ul li.level-2 > ul {
padding-left: 30px;
}
.dropdown-select > ul li.uncollapsed > .group-caption:before {
content: "\f147";
}
.dropdown-select ul {
overflow: hidden;
}
.dropdown-select.dropped > ul {
transform: scaleY(1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment