How to select more than one item in a Select Option

Question

I need to choose more than one option in a select. For example, I could have a checkbox inside the select but I don’t know how to do it, can help me?

<div class="col-md-3">
     <label style="color: red;">Filial</label >
     <select ng-model="modelcompraevenda.filial" 
             class="form-control" id="myDropdown" 
             style="z-index:0" ng-
             options="x.nomeFilial for x in 
             modelcompraevenda.listFiliais track by 
     x.idFilial">
     </select>
</div>

Answer 1

You can create a normal select with the Multiple tag on shipping, where the user selects with Ctrl the multiple options in his select, when passed by post, will receive something like:

<form action="/action_page.php">
<select name="opcoes" multiple>
  <option value="opcao1">opcao1</option>
  <option value="opcao2">opcao2</option>
  <option value="opcao3">opcao3</option>
  <option value="opcao4">opcao4</option>
</select>
<input type="submit">
</form>

options=option 1&options=option 2&options=option 3

Then you can deal with js, jquery, php or the language you are using.

Another cool solution is to use a jquery plugin, I recently used this: http://loudev.com/ He’s really nice and elegant.

About the multi select, take a look at this documentation: https://www.w3schools.com/tags/att_select_multiple.asp

I hope I’ve helped.

Answer 2

I believe you’ve found the solution you described: https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option

Are checkbox within select.

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

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
</form>

Answer 3

You can do this by just adding the attribute multiple in his select.

<select multiple name="lista">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
</select>

If you want to improve the look and make it more suggestive you can put a message to the user in a label for example and also improve the look using css.

I’ll demonstrate below how the select multiple using the Plugin jquery Select2 that I believe to be very practical:

$(".select2").select2();

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<div>
  <label for="idSelect2">
    Clique para selecionar um ou mais alunos:
    </label>
</div>
<div>
  <select class="select2 form-control" id="idSelect2" multiple="" tabindex="-1" style="display: none;">
    <optgroup label="Ciência da computação">
      <option value="1">Herp</option>
      <option value="2">Derp</option>
      <option value="3">Caique</option>
    </optgroup>
    <optgroup label="Administracao">
      <option value="4">Larissa</option>
      <option value="5">Bruna</option>
      <option value="6">Natalia</option>
      <option value="7">Maria</option>
    </optgroup>
  </select>
</div>

Answer 4

I made a script by hand (using jQuery) that replaces a <select> of multiple choice by a dropdown with checkbox for each option.

How it works:

I added 2 divs below the <select> to receive the dropdown.

The script hides the <select> and creates a dropdown in divs based on information from <select>.

When a checkbox is marked, the <option> corresponding to the <select> hidden is selected by receiving the attribute selected="selected". When unchecked, the attribute is removed.

$(document).ready(function(){
	el_select = $("select[name=lista]");
	el_select.hide();
	$.each(el_select.find("option"), function(){
		$("#novo_select_container ul").append(
		'<li><input type="checkbox" value="'+$(this).val()+'" />'+$(this).text()+'</li>'
		);
	});

	$("#novo_select input[type=checkbox]").on("click",function(){
		if($(this).is(":checked")){
			$("select[name=lista] option[value="+$(this).val()+"]").attr("selected","selected");
		}else{
			$("select[name=lista] option[value="+$(this).val()+"]").removeAttr("selected");
		}
	});

	$("#novo_select li:not(:eq(0))").on("click",function(){
		$(this).find("input").trigger("click");
	});

	$("#novo_select_container li:eq(0)").on("click", function(){
		if($("#novo_select").hasClass("novo_select_fechado")){
			$("#novo_select").removeClass("novo_select_fechado").addClass("novo_select_aberto");
			$("#novo_select_container").css("height","auto");
		}else{
			$("#novo_select").removeClass("novo_select_aberto").addClass("novo_select_fechado");
			$("#novo_select_container").css("height","21px");
		}
	});

	$("#novo_select_container li input, #novo_select_container li").on("click", function(e){
		e.stopPropagation();
	});
	
	$(document).on('click',function(){
		if($("#novo_select").hasClass("novo_select_aberto")){
			$("#novo_select").removeClass("novo_select_aberto").addClass("novo_select_fechado");
			$("#novo_select_container").css("height","21px");
		}
	});
});

#novo_select_container{
	position: relative;
	height: 21px;
	display: inline-block;
}

#novo_select{
	background: #ddd;
}

#novo_select li, #novo_select ul{
	padding: 0;
	margin: 0;
}

#novo_select li{
	padding: 0 10px;
	line-height: 25px;
	cursor: default;
}

#novo_select li:first-child{
	background: url(https://www.materialui.co/materialIcons/navigation/arrow_drop_down_grey_192x192.png) right no-repeat;
	background-size: contain;
	padding-right: 25px;
}

.novo_select_aberto{
	position: relative;
	display: inline-block;
}

.novo_select_fechado{
	position: absolute;
	clip: rect(0px 1000px 25px 0px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple name="lista">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
</select>
<div id="novo_select_container">
	<div id="novo_select" class="novo_select_fechado"><ul><li>Selecione...</li></ul></div>
</div>