Khách hàng đã cung cấp cho tôi một thiết kế có menu chọn chọn có chứa hộp kiểm cùng với tên mục dưới dạng các mục riêng lẻ trong danh sách. Có thể có thể thêm hộp kiểm bên trong menu chọn chọn không?
NB: Nhà phát triển cần thêm ID của riêng mình để làm cho menu hiệu quả, tôi chỉ cần mã HTML CSS nếu có thể.
Tylerh
Huy hiệu vàng 20.4K6060 gold badges75 silver badges94 bronze badges
hỏi ngày 18 tháng 7 năm 2013 lúc 4:46Jul 18, 2013 at 4:46
5
Bạn không thể đặt hộp kiểm bên trong phần tử chọn nhưng bạn có thể nhận được chức năng tương tự bằng cách sử dụng HTML, CSS và JavaScript. Đây là một giải pháp làm việc có thể. Giải thích sau đây.
Mã số:
var expanded = false;
function showCheckboxes[] {
var checkboxes = document.getElementById["checkboxes"];
if [!expanded] {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
Select an option
First checkbox
Second checkbox
Third checkbox
Explanation:
Lúc đầu, chúng tôi tạo một phần tử chọn hiển thị văn bản "Chọn một tùy chọn" và phần tử trống bao gồm [sự chồng chéo] phần tử chọn [
Select an option
First checkbox
Second checkbox
Third checkbox
3]. Chúng tôi không muốn người dùng nhấp vào phần tử chọn - nó sẽ hiển thị một tùy chọn trống. Để chồng chéo phần tử với phần tử khác, chúng tôi sử dụng thuộc tính vị trí CSS với giá trị tương đối | Tuyệt đối.Để thêm chức năng, chúng tôi chỉ định chức năng JavaScript được gọi khi người dùng nhấp vào DIV chứa phần tử chọn của chúng tôi [
Select an option
First checkbox
Second checkbox
Third checkbox
4].Chúng tôi cũng tạo Div chứa các hộp kiểm của chúng tôi và kiểu nó bằng CSS. Hàm JavaScript đã đề cập ở trên chỉ thay đổi giá trị
Select an option
First checkbox
Second checkbox
Third checkbox
5 của thuộc tính hiển thị CSS từ "Không" thành "Chặn" và ngược lại.Giải pháp đã được kiểm tra trong các trình duyệt sau: Internet Explorer 10, Firefox 34, Chrome 39. Trình duyệt cần bật JavaScript.
Thêm thông tin:
Định vị CSS
Cách phủ một div trên div khác
//www.w3schools.com/css/css_positioning.asp
CSS hiển thị thuộc tính
//www.w3schools.com/cssref/pr_class_display.asp
Đã trả lời ngày 18 tháng 12 năm 2014 lúc 12:50Dec 18, 2014 at 12:50
Vitfovitfovitfo
9.3216 Huy hiệu vàng29 Huy hiệu bạc 30 Huy hiệu Đồng6 gold badges29 silver badges30 bronze badges
13
Plugin tốt nhất cho đến nay là Bootstrap Multisect
EDIT: Tôi đã viết điều này từ rất lâu rồi. Tôi sẽ không khuyên bạn nên sử dụng jQuery nữa. Bạn nên học một khung phản ứng như Vue.js, React hoặc Angular nơi bạn có nhiều mô -đun để lựa chọn. Tôi chắc chắn bạn sẽ tìm thấy những gì bạn cần. Tôi đã tìm thấy cái này ví dụ từ một tìm kiếm nhanh trên google. I wrote this a very long time ago. I would not recommend using jQuery anymore. You should rather learn a reactive framework like Vue.js, React, or Angular where you have plenty of modules to choose from. I'm sure you'll find what you need. I found this one for instance from a quick Google search.
jQuery Multi Select Dropdown with Checkboxes
Cheese
Tomatoes
Mozzarella
Mushrooms
Pepperoni
Onions
$[function[] {
$['#chkveg'].multiselect[{
includeSelectAllOption: true
}];
$['#btnget'].click[function[]{
alert[$['#chkveg'].val[]];
}];
}];
Đây là bản demo:
$[function[] {
$['#chkveg'].multiselect[{
includeSelectAllOption: true
}];
$['#btnget'].click[function[] {
alert[$['#chkveg'].val[]];
}];
}];
.multiselect-container>li>a>label {
padding: 4px 20px 3px 20px;
}
Cheese
Tomatoes
Mozzarella
Mushrooms
Pepperoni
Onions
Đã trả lời ngày 20 tháng 8 năm 2014 lúc 21:42Aug 20, 2014 at 21:42
PMROTULEPMROTULEpmrotule
8.3753 Huy hiệu vàng45 Huy hiệu bạc57 Huy hiệu Đồng3 gold badges45 silver badges57 bronze badges
7
Đối với cách tiếp cận CSS thuần túy, bạn có thể sử dụng bộ chọn
Select an option
First checkbox
Second checkbox
Third checkbox
6 kết hợp với bộ chọn
Select an option
First checkbox
Second checkbox
Third checkbox
7 để nội dung có điều kiện.Pure CSS approach, you can use the
Select an option
First checkbox
Second checkbox
Third checkbox
6 selector combined with the
Select an option
First checkbox
Second checkbox
Third checkbox
7 selector to inline conditional content.Chỉ cần thêm lớp
Select an option
First checkbox
Second checkbox
Third checkbox
8 vào phần tử
Select an option
First checkbox
Second checkbox
Third checkbox
9 của bạn và bao gồm các CSS sau:.select-checkbox option::before {
content: "\2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "\2611";
}
Bạn có thể sử dụng các ký tự unicode cũ đơn giản [với mã hóa hex thoát ra] như sau:
- Hộp bỏ phiếu -
0jQuery Multi Select Dropdown with Checkboxes
Cheese Tomatoes Mozzarella Mushrooms Pepperoni Onions
$[function[] { $['#chkveg'].multiselect[{ includeSelectAllOption: true }]; $['#btnget'].click[function[]{ alert[$['#chkveg'].val[]]; }]; }]; - Hộp bỏ phiếu với séc -
1jQuery Multi Select Dropdown with Checkboxes
Cheese Tomatoes Mozzarella Mushrooms Pepperoni Onions
$[function[] { $['#chkveg'].multiselect[{ includeSelectAllOption: true }]; $['#btnget'].click[function[]{ alert[$['#chkveg'].val[]]; }]; }];
Hoặc nếu bạn muốn gia vị mọi thứ, bạn có thể sử dụng những glyphs fontawgoes này
Bản demo trong đoạn trích JSfiddle & Stack
Lưu ý: Tuy nhiên, hãy cẩn thận với các vấn đề tương thích IE: Beware of IE compatibility issues however
Đã trả lời ngày 13 tháng 2 năm 2018 lúc 21:34Feb 13, 2018 at 21:34
Kylemit ♦ Kylemit♦KyleMit
35K61 Huy hiệu vàng433 Huy hiệu bạc626 Huy hiệu đồng61 gold badges433 silver badges626 bronze badges
6
Hãy thử nhiều lựa chọn, đặc biệt là nhiều mục. Có vẻ là giải pháp sạch sẽ và được quản lý, với hàng tấn ví dụ. Bạn cũng có thể xem nguồn.
Basic Select
1
2
Group Select
1
2
6
7
11
12
$[function[] {
$['select'].multipleSelect[{
multiple: true,
multipleWidth: 60
}]
}]
Đã trả lời ngày 11 tháng 4 năm 2015 lúc 1:55Apr 11, 2015 at 1:55
Azghanviaz AfghanistanviAzghanvi
89510 Huy hiệu bạc19 Huy hiệu đồng10 silver badges19 bronze badges
0
Phiên bản Vanilla JS thay thế với nhấp chuột bên ngoài để ẩn các hộp kiểm:
let expanded = false;
const multiSelect = document.querySelector['.multiselect'];
multiSelect.addEventListener['click', function[e] {
const checkboxes = document.getElementById["checkboxes"];
if [!expanded] {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
e.stopPropagation[];
}, true]
document.addEventListener['click', function[e]{
if [expanded] {
checkboxes.style.display = "none";
expanded = false;
}
}, false]
Tôi đang sử dụng AddEventListener thay vì title để tận dụng các tùy chọn pha bắt/sủi bọt cùng với stopPropagation []. Bạn có thể đọc thêm về việc bắt/sủi bọt tại đây: //developer.mozilla.org/en-us/docs/web/api/eventtarget/addeventlistener
Phần còn lại của mã phù hợp với câu trả lời ban đầu của Vitfo [nhưng không cần title [] trong HTML]. Một vài người đã yêu cầu chức năng này sans jQuery.
Đây là ví dụ codepen //codepen.io/davidysoards/pen/qxyyya?editors=1010
Đã trả lời ngày 11 tháng 7 năm 2019 lúc 12:21Jul 11, 2019 at 12:21
Tôi đã bắt đầu từ câu trả lời của @vitfo nhưng tôi muốn có
jQuery Multi Select Dropdown with Checkboxes
Cheese
Tomatoes
Mozzarella
Mushrooms
Pepperoni
Onions
$[function[] {
$['#chkveg'].multiselect[{
includeSelectAllOption: true
}];
$['#btnget'].click[function[]{
alert[$['#chkveg'].val[]];
}];
}];
2 bên trong
jQuery Multi Select Dropdown with Checkboxes
Cheese
Tomatoes
Mozzarella
Mushrooms
Pepperoni
Onions
$[function[] {
$['#chkveg'].multiselect[{
includeSelectAllOption: true
}];
$['#btnget'].click[function[]{
alert[$['#chkveg'].val[]];
}];
}];
3 thay vì đầu vào hộp kiểm để tôi kết hợp tất cả các câu trả lời để thực hiện điều này, có mã của tôi, tôi hy vọng nó sẽ giúp ai đó..multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
0.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
1.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
2Đã trả lời ngày 8 tháng 4 năm 2019 lúc 16:24Apr 8, 2019 at 16:24
PavelBerepavelBerepavelbere
9649 Huy hiệu bạc21 Huy hiệu đồng9 silver badges21 bronze badges
Sử dụng mã này cho danh sách hộp kiểm trên menu tùy chọn.
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
3.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
4
Kylemit ♦♦
35K61 Huy hiệu vàng433 Huy hiệu bạc626 Huy hiệu đồng61 gold badges433 silver badges626 bronze badges
Hãy thử nhiều lựa chọn, đặc biệt là nhiều mục. Có vẻ là giải pháp sạch sẽ và được quản lý, với hàng tấn ví dụ. Bạn cũng có thể xem nguồn.Oct 31, 2017 at 7:14
2
Đã trả lời ngày 11 tháng 4 năm 2015 lúc 1:55
Azghanviaz Afghanistanvi
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
589510 Huy hiệu bạc19 Huy hiệu đồng
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
6Phiên bản Vanilla JS thay thế với nhấp chuột bên ngoài để ẩn các hộp kiểm:Apr 5, 2018 at 5:15
Bạn có thể đang tải tệp multiselect.js trước khi danh sách tùy chọn được cập nhật với AJAX CALL Vì vậy, trong khi thực hiện tệp multiselect.js có danh sách tùy chọn trống có để áp dụng chức năng đa dạng. Vì vậy, trước tiên, hãy cập nhật danh sách tùy chọn bằng cách gọi AJAX sau đó bắt đầu cuộc gọi MultiSelect, bạn sẽ nhận được danh sách thả xuống với danh sách tùy chọn động.
Hy vọng rằng cái này sẽ giúp đc bạn.
Danh sách thả xuống MultiSelect và các tệp JS & CSS liên quan
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
7.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
8
ánh sáng rõ ràng
11.7K11 Huy hiệu vàng53 Huy hiệu bạc74 Huy hiệu đồng11 gold badges53 silver badges74 bronze badges
Đã trả lời ngày 18 tháng 8 năm 2016 lúc 13:56Aug 18, 2016 at 13:56
0
Bạn có thể thử Bootstrap-Select. Nó cũng có một tìm kiếm trực tiếp!
Đã trả lời ngày 26 tháng 12 năm 2019 lúc 9:17Dec 26, 2019 at 9:17
Saeesaeesaee
4151 Huy hiệu vàng3 Huy hiệu bạc15 Huy hiệu đồng1 gold badge3 silver badges15 bronze badges
Nếu bạn muốn tạo nhiều lần thả xuống chọn trong cùng một trang:
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
9Html:
Select an option
First checkbox
Second checkbox
Third checkbox
0Sử dụng jQuery:
Select an option
First checkbox
Second checkbox
Third checkbox
1Đã trả lời ngày 25 tháng 10 năm 2019 lúc 6:05Oct 25, 2019 at 6:05
AshishashishAshish
991 Huy hiệu bạc11 Huy hiệu đồng1 silver badge11 bronze badges
Chỉ thêm lớp tạo div và thêm kiểm soát biểu mẫu lớp. iam Sử dụng JSP, BOOSTRAP4. Bỏ qua C: ForEach.
Select an option
First checkbox
Second checkbox
Third checkbox
2Đã trả lời ngày 7 tháng 9 năm 2019 lúc 18:21Sep 7, 2019 at 18:21