How to select multiple items when clicked?

Question

.s-select { margin-top: 37px; } form { background-color: #fff; } .select { color: #000; width: 290px; height: 50px; padding-left: 29px; color: #000000; font-family: Montserrat; font-size: 14px; font-weight: 500; line-height: 60px; text-transform: uppercase; background-color: #fff; letter-spacing: 0.7px; } .select .option:hover { color: #e41645; background-color: #fff; overflow-y: auto; } .select .option:active { background-color: #fff; } .selectbox .select:hover { background-color: #fff; background-position: 0 -10px; } .selectize-control.single .selectize-input, .selectize-control.single .selectize-input input { background-color: #fff; padding-top: 18px; padding-bottom: 18px; } .selectize-control.single .selectize-input, .selectize-control.single .selectize-input input:hover { background-color: #fff; } .selectize-dropdown, .selectize-input, .selectize-input input { background-color: #fff; } .select__title { color: #333333; font-family: Montserrat; font-size: 20px; font-weight: 700; line-height: 73px; text-transform: uppercase; padding-bottom: 22px; letter-spacing: 2px; border-bottom: 1px solid #e4e4e4; } .seli { margin-top: 100px; } .select-block { margin-left: 70px; }

 <section class="s-select"> <div class="container"> <div class="row"> <div class="col-md-3"> <form action="#" method="post"> <select size="1" name="hero[]" class='select' id='select-beast'> <option class='option'>MID</option> <option class='option'>AC</option> <option class='option'>Muse</option> <option class='option'>Solon</option> </select> </form> </div> </div> </div> </section>

You can make a drop-down list with checkboxes only using JavaScript.
For example, using the plugin multiple-select.wenzhixin.net.cn/examples/#basic.html .
Or any other found in Google for the query "multiple select script".

Accepted Answer · 2019-04-25T22:27:45

You can simulate such a select through JS)
(added a variant for several selections on the page below)

For one such item:

 (function(){ /*При клике на "селект" - переключаем класс-невидимку*/ /*Важно, чтобы невидимка в CSS находилась в самом конце, чтобы была в приоритете*/ document.getElementById('colorpick').addEventListener('click',function(){ document.getElementById('dropdown').classList.toggle('INVIS'); }); let check;//let, потому что будет меняться, считая кол-во классов const clr = document.getElementById('clr');//это невидимый span перед "любимый цвет" const color = document.getElementsByClassName('color'); for(let i = 0; i < color.length; i++){ color[i].addEventListener('click',function(){ /*При клике переключаем "отмеченный" класс. Его можно потом в другом месте использовать, также несет в себе оранжевую галочку */ this.classList.toggle('check'); check = document.getElementsByClassName('check').length; //текст внутри делаем равным кол-ву добавленных классов, + скобки для вида; clr.innerText = '(' + check + ')'; if(check > 0) { clr.style.display = "inline-block"; } else {clr.style.display = "none";}//если убрали галочку и стало 0 - делаем невидимым }); } //Закрываем опции, как только с них убирают мышку. document.getElementById('dropdown').addEventListener('mouseleave',function(){ this.classList.toggle('INVIS'); }); })();

 .block {width: 30%} #colorpick { text-align: center; cursor: pointer; box-sizing: border-box; /*важно для незаивисомти от padding*/ padding: 5px; border: 1px solid #333; user-select: none; /*Бесит, когда кликаешь и текст выделяется*/ } .color { box-sizing: border-box; padding: 2px 3px; margin: 0 1px; border-bottom: 1px solid #666; /*relative важен, чтобы галочка не съехала*/ position: relative; } .color:hover {background-color: #ffe2aa; cursor: pointer;} /*Это иконка галочки*/ .check:after { content: ""; position: absolute; right: 5px; width: 5px; height: 10px; border-bottom: 2px solid #f36700; border-right: 2px solid #f36700; transform: rotate(40deg); } .INVIS {display: none;}

 <div class="block"> <div id="colorpick"><span id="clr" class="INVIS"></span> Любимый цвет? ▼</div> <div id="dropdown" class="INVIS"> <div class="color">Белый</div> <div class="color">Черный</div> <div class="color">Красный</div> <div class="color">Оранжевский</div> <div class="color">Филалетовый</div> <div class="color">Каричнёвский</div> </div> </div>

For several selects ...

Redid the option for classes. In the script, the moment is actively used that in this example, HTML has the same number of selections, pop-up windows, and a "chosen" fad (so as not to go through for once again). Therefore, these classes do not need to add anywhere else on the page.

It is inconvenient to watch the results, so it’s better here: JsFiddle , stretch the window to full screen and delve into it) Added a few demo lines to make it easier to understand what the variables were created for.

 (function(){ /**/ const demo = document.getElementsByClassName('demo'); const colorpick = document.getElementsByClassName('colorpick'); const dropdown = document.getElementsByClassName('dropdown'); let check = []; let index; for(let i = 0; i < colorpick.length; i++){ check.push(0); /**/ demo[0].innerHTML = check; colorpick[i].addEventListener('mouseenter', function(){ index = i; /**/ demo[1].innerHTML = index; for(let u = 0; u < dropdown.length; u++){dropdown[u].classList.add('INVIS');} dropdown[i].classList.remove('INVIS'); }); dropdown[i].addEventListener('mouseleave',function(){ this.classList.add('INVIS'); }); } const clr = document.getElementsByClassName('clr'); const color = document.getElementsByClassName('color'); for(let i = 0; i < color.length; i++){ color[i].addEventListener('click',function(){ if( this.className.match(/check/g) ){ this.classList.remove('check'); check[index] = check[index] - 1; } else {this.classList.add('check'); check[index] = check[index] + 1;} /**/ demo[2].innerHTML = check; clr[index].innerText = '(' + check[index] + ')'; }); } })();

 /*CSS не менял*/ .block {width: 30%}.colorpick { text-align: center; cursor: pointer; box-sizing: border-box; padding: 5px; border: 1px solid #333; user-select: none;}.color, .total { box-sizing: border-box; padding: 2px 3px; margin: 0 1px; border-bottom: 1px solid #666; position: relative;}.total {background-color: #bbb;}.color:hover {background-color: #ffe2aa; cursor: pointer;} .check:after { content: ""; position: absolute; right: 5px; width: 5px; height: 10px; border-bottom: 2px solid #f36700; border-right: 2px solid #f36700; transform: rotate(40deg);}.INVIS {display: none;}

 <span class="demo">0</span> — check.push(0); — создали массив, где для каждого селекта будет хранится изначально 0 (ноль выбранных) <br><span class="demo">0</span> — index (меняется при наведении на селект) <br><span class="demo">0</span> — check[index] = check[index] -/+ 1; // Вот и можно при клике на пункты, брать этот индекс и если был добавлен класс - галочку, прибавить к числу в массиве +1, а если убран класс, -1. А потом можно будет по этому же индексу полчить текущее значение и показать в кол-ве выбранных. <br><br> <div style="display: flex"> <div class="block"> <div class="colorpick"> Любимый цвет? ▼</div> <div class="dropdown INVIS"> <div class="total">Выбрано: <span class="clr">0</span></div> <div class="color">Белый</div> <div class="color">Черный</div> <div class="color">Красный</div> <div class="color">Оранжевский</div> <div class="color">Филалетовый</div> <div class="color">Каричнёвский</div> </div> </div> <div class="block"> <div class="colorpick"> Любимый цвет? ▼</div> <div class="dropdown INVIS"> <div class="total">Выбрано: <span class="clr">0</span></div> <div class="color">Белый</div> <div class="color">Черный</div> <div class="color">Красный</div> <div class="color">Оранжевский</div> <div class="color">Филалетовый</div> <div class="color">Каричнёвский</div> </div> </div> <div class="block"> <div class="colorpick"> Любимый цвет? ▼</div> <div class="dropdown INVIS"> <div class="total">Выбрано: <span class="clr">0</span></div> <div class="color">Белый</div> <div class="color">Черный</div> <div class="color">Красный</div> <div class="color">Оранжевский</div> <div class="color">Филалетовый</div> <div class="color">Каричнёвский</div> </div> </div> </div>

Done) (And I am not found anywhere else in social networks *)
a little wrong where it says the selected colors under it goes an element called selected and how many ticks there is and there is a number
In HTML, you can take <span id="clr" class="INVIS"></span> and put it into another extra div (above the color list), and it will also work.
I did as you said and when you click on the color white, select auto closes

Igor Igor 78.1k five 20 49 · Answer 2 · 2019-04-25T21:49:25

 <select size="1" name="hero[]" class='select' id='select-beast' multiple>

Igor

78.1k five 20 49

Please look at the picture. I need a drop-down list. How can I do it? - xes
@Loki, and what do you think this is not a drop-down list? You only need to add to the list multiple . - And
@And when you select an item a check mark appears using a multiple of this effect can you get? - xes
@Loki, and try to do it first ?? - And
one
@OPTIMUSPRIME, select with the mouse =) - And

|

How to select multiple items when clicked?

2 answers 2

More articles: