jQuery Multi Select Dropdown with Checkboxes

Как использовать флажок внутри Select Option

Клиент предоставил мне проект, в котором есть меню «Выбор варианта», содержащее флажок вместе с именем элемента как отдельные элементы в списке. Можно ли добавить флажок внутри меню «Выбор варианта»? NB: разработчику необходимо добавить свой собственный идентификатор, чтобы сделать меню эффективным, мне нужен только код HTML CSS, если это возможно.

«Мне нужен только HTML-код HTML, если это возможно в любом случае» . да, это возможно . вам просто нужно кодировать его самостоятельно или Google

@fmodos возможно? Пожалуйста, скажите нам демо, и OP — проверьте это . Это невозможно только с CSS и HTML

@Mr.AlienMr.Alien Я не понял, понял . Я подумал, что он просит компонент, который «может» быть HTML CSS, а не «должен» быть только «HTML CSS» . мой плохой: /

9 ответов

Вы не можете установить флажок внутри элемента select, но вы можете получить ту же функциональность, используя HTML, CSS и JavaScript. Вот возможное рабочее решение. Объяснение следующее.

Код:

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

 
 
 
 Select an option  
 
 First checkbox Second checkbox Third checkbox 
 
 

Объяснение:

Сначала мы создаем элемент select, который показывает текст «Select a option», и пустой элемент, который покрывает (перекрывает) элемент select ( ). Мы не хотим, чтобы пользователь нажимал на элемент select — он отображал бы пустые опции. Чтобы перекрыть элемент с другим элементом, мы используем CSS свойство position со значением относительным | абсолют.

Чтобы добавить функциональность, мы указываем функцию JavaScript, которая вызывается, когда пользователь нажимает на элемент div, содержащий наш элемент select ( ).

Мы также создаем div, который содержит наши флажки, и стилизуем его с помощью CSS. Вышеупомянутая функция JavaScript просто меняет значение свойства отображения CSS с «none» на «block» и наоборот.

Решение было протестировано в следующих браузерах: Internet Explorer 10, Firefox 34, Chrome 39. В браузере должен быть включен JavaScript.

Дополнительная информация:

CSS позиционирование

CSS свойство display

Источник

Селект с чекбоксами

Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать Ctrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.

Данный пример реализован в виде jQuery плагина, который позволяет вывести несколько независимых селектов:

Верстка списка, стили и JS

Верстка списка проста и требует только класс .checkselect у родительского элемента.

 
Google Inc.  Apple Inc.  Microsoft  Facebook  Amazon  Verizon 

Код плагина

(function($) < function setChecked(target) < var checked = $(target).find("input[type='checkbox']:checked").length; if (checked) < $(target).find('select option:first').html('Выбрано: ' + checked); >else < $(target).find('select option:first').html('Выберите из списка'); >> $.fn.checkselect = function() < this.wrapInner('
' ); this.each(function()< setChecked(this); >); this.find('input[type="checkbox"]').click(function()< setChecked($(this).parents('.checkselect')); >); this.parent().find('.checkselect-control').on('click', function() < $popup = $(this).next(); $('.checkselect-popup').not($popup).css('display', 'none'); if ($popup.is(':hidden')) < $popup.css('display', 'block'); $(this).find('select').focus(); >else < $popup.css('display', 'none'); >>); $('html, body').on('click', function(e) < if ($(e.target).closest('.checkselect').length == 0)< $('.checkselect-popup').css('display', 'none'); >>); >; >)(jQuery); $('.checkselect').checkselect();

CSS стили

.checkselect < position: relative; display: inline-block; min-width: 200px; text-align: left; >.checkselect-control < position: relative; padding: 0 !important; >.checkselect-control select < position: relative; display: inline-block; width: 100%; margin: 0; padding-left: 5px; height: 30px; >.checkselect-over < position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer; >.checkselect-popup < display: none; box-sizing: border-box; margin: 0; padding: 0; width: 100%; height: auto; max-height: 200px; position: absolute; top: 100%; left: 0px; border: 1px solid #dadada; border-top: none; background: #fff; z-index: 9999; overflow: auto; user-select: none; >.checkselect label < position: relative; display: block; margin: 0; padding: 4px 6px 4px 25px; font-weight: normal; font-size: 1em; line-height: 1.1; cursor: pointer; >.checkselect-popup input < position: absolute; top: 5px; left: 8px; margin: 0 !important; padding: 0; >.checkselect-popup label:hover < background: #03a2ff; color: #fff; >.checkselect-popup fieldset < display: block; margin: 0; padding: 0; border: none; >.checkselect-popup fieldset input < left: 15px; >.checkselect-popup fieldset label < padding-left: 32px; >.checkselect-popup legend

Группировка элементов

Сгруппировать элементы chekbox на подобие тега можно дополнив верстку тегами и :

 
Группа 1
  Google Inc.  Apple Inc.  Microsoft  
Группа 2
  Facebook  Amazon  Verizon  McDonald's 
 
 

Источник

How to use Checkbox inside Select Option

The client has given me a design which has a Select Option menu containing a checkbox together with the item name as individual items in the list.Is there anyway possible to add a checkbox inside a Select Option menu?

NB: Developer needs to add his own id to make the menu effective, I only need the HTML CSS code if it is possible.

SOLUTION 1 :

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript. Here is a possible working solution. The explanation follows.

Code:

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 
 

SOLUTION 2 :

The best plugin so far is Bootstrap Multiselect

 
Cheese 
Tomatoes 
Mozzarella 
Mushrooms 
Pepperoni 
Onions

SOLUTION 3 :

For a Pure CSS approach, you can use the [IKI_CODE] selector combined with the [IKI_CODE] selector to inline conditional content.

Just add the class :checked to your ::before element and include the following CSS:

You can use plain old unicode characters (with an escaped hex encoding) like these:

• ☐ Ballot Box — select
• ☑ Ballot Box With Check — .select-checkbox option::before content: «\2610»;
  width: 1.3em;
  text-align: center;
  display: inline-block;
  >
  .select-checkbox option:checked::before content: «\2611»;
  >

Or if you want to spice things up, you can use these FontAwesome glyphs

• .fa-square-o — \2610
• .fa-check-square-o — \2611

Demo in jsFiddle & Stack Snippets

SOLUTION 4 :

Try multiple-select. Looks to be much clean and managed solution, with tons of examples.

SOLUTION 5 :

for initiating the selectbox use this

 $("#selectBoxId").multiselect().multiselectfilter();

and when you have the data ready in json (from ajax or any method), first parse the data & then assign the js array to it

 var js_arr = $.parseJSON(/*data from ajax*/); 
$("#selectBoxId").val(js_arr); 
$("#selectBoxId").multiselect("refresh");

SOLUTION 6 :

Use this code for checkbox list on option menu.

select width: 150px;
>

.select-checkbox option::before content: "\2610"; 
width: 1.3em; 
text-align: center; 
display: inline-block;
>
.select-checkbox option:checked::before content: "\2611";
>

.select-checkbox-fa option::before font-family: FontAwesome; 
content: "\f096"; 
width: 1.3em; 
display: inline-block; 
margin-left: 2px;
>
.select-checkbox-fa option:checked::before content: "\f046";
>

Unicode

 
Dog 
Cat 
Hippo 
Dinosaur 
Another Dog


Font Awesome

 
Dog 
Cat 
Hippo 
Dinosaur 
Another Dog

SOLUTION 7 :

You might be loading multiselect.js file before the option list updated with AJAX call so while execution of multiselect.js file there is empty option list is there to apply multiselect functionlaity. So first update the option list by AJAX call then initiate the multiselect call you will get the dropdown list with the dynamic option list.

Hope this will help you out.

.dropdown-menu input margin-right: 10px;
> 

SOLUTION 8 :

// This function should be called while loading page
var loadParentTaskList = function() $.ajax( url: yoururl, 
method: 'POST', 
success: function(data) // To add options list coming from AJAX call multiselect 
for (var field in data) $('' + data[field].name + '').appendTo('#parent_task'); 
> 
 
// To initiate the multiselect call 
$("#parent_task").multiselect( includeSelectAllOption: true 
>) 
> 
>);
>

// Multiselect drop down list with id parent_task

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

SOLUTION 9 :

I started from @vitfo answer but I want to have .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;
>

$(".multiple_select").on('click', function(e) if (e.target.tagName == "OPTION") 
 return; //don't close dropdown if i select option 
> 
$(this).toggleClass('multiple_select_active'); //close dropdown if click inside box
>);
$(".multiple_select").on('blur', function(e) $(this).removeClass('multiple_select_active'); //close dropdown if click outside 
>); 

$('.multiple_select option').mousedown(function(e) < //no ctrl to select multiple
e.preventDefault(); 
$(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click 
$(this).parent().change(); //trigger change event
>);
 
 
$("#myFilter").on('change', function() //here I get all options using $("#myFilter").val(); 
>);

Источник