How to make a listbox where I can select more than one value?

Question

How to make a listbox where I can select more than one value?

Asked 6 years, 10 months ago

Viewed 466 times

3

I want to make a listbox, where the user can select several options, but using select Multiple, I have to hold Ctrl, however this is not ideal, many people will not know it. Anyone can help?

<div class="form-group">                
              <label> Dias disponíveis <br />
                <select name="dias" id="dias" multiple>
                  <option value="Segunda-Feira">Segunda-Feira</option>
                  <option value="Terça-Feira">Terça-Feira</option>
                  <option value="Quarta-Feira">Quarta-Feira</option>
                  <option value="Quinta-Feira">Quinta-Feira</option>
                  <option value="Sexta-Feira">Sexta-Feira</option>
                </select>
              </label>
</div>

There are several codes for this purpose, however, none of them works in all browsers, which is also not ideal. http://jsfiddle.net/xQqbR/1022/ other http://jsfiddle.net/UziTech/cjjg68dr/114/

– user60252

2017/09/07 at 07:25

2 answers

2

Select2 is an appropriate plugin for this case something a little more elegant. Just download and place the css in the header and the javascript files at the bottom of the page, before the end of the tag </body>.

$('.multiplo').select2({
  placeholder: 'selecione'
});

.multiplo{
width:50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/>

<select class="multiplo" name="" multiple="multiple">
  <option>Um</option>
  <option>Dois</option>
  <option>Três</option>
  <option>Quatro</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

Vlw partner, I’ll try it this way!

– Arthur Oliveira

2017/10/31 at 12:24

Browser other questions tagged php javascript jquery html

You are not signed in. Login or sign up in order to post.

by Inkeliz • **20,671** points · Answer 1 · 2017-09-07T04:18:16+00:00

You can change the default behavior of it, using only Javascript, without Jquery could do:

let elemento_options = document.querySelectorAll('select[multiple] option');

elemento_options.forEach(function(elemento, index) {
  elemento.addEventListener("mousedown", option_handler)
});

function option_handler(e) {
  e.preventDefault();
  e.target.selected = !e.target.selected;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label> Dias disponíveis <br>
  <select name="dias" id="dias" multiple>
    <option value="Segunda-Feira">Segunda-Feira</option>
    <option value="Terça-Feira">Terça-Feira</option>
    <option value="Quarta-Feira">Quarta-Feira</option>
    <option value="Quinta-Feira">Quinta-Feira</option>
    <option value="Sexta-Feira">Sexta-Feira</option>
  </select>
</label>

This will cause when clicked (using mousedown, that the same browser uses) will prevent default behavior and will invert the current value, so if it is already marked will deselect.