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

Asked

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>
php javascript jquery html

  • 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/

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!

2

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.

  • This script has to stay in the head right? Or I can leave it in the body as it is there?

Browser other questions tagged php javascript jquery html

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