6

Preciso escolher mais de uma option em um select. Por exemplo, poderia ter um checkbox dentro do select porem não sei como fazer, podem me ajudar?

<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>
4
  • 1
    Dá-lhe o atributo multiple. developer.mozilla.org/en-US/docs/Web/HTML/Element/…
    – Sergio
    Commented 11/10/2017 às 14:43
  • tem outra melhor opção? Commented 11/10/2017 às 14:49
  • Melhor em que aspeto? O que é que não funciona como queres?
    – Sergio
    Commented 11/10/2017 às 14:50
  • em questão visual, não esta explicito que o usuario pode selecionar mais de um item e a cada click ele não ficar marcado qual esta ou não selecionado Commented 11/10/2017 às 14:55

4 Respostas 4

7

Você pode criar um select normal com a tag multiple na frente, onde o usuário seleciona com ctrl as opções multiplas no seu select, quando passado por post, receberá algo como:

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

opcoes=opcao1&opcoes=opcao2&opcoes=opcao3

Depois você pode tratar com js, jquery, php ou a linguagem que está utilizando.

Uma outra solução bem legal é usar um plugin jquery, utilizei recentemente esse: http://loudev.com/ ele é bem legal e elegante.

Sobre o multi select, da uma olhada nessa documentação: https://www.w3schools.com/tags/att_select_multiple.asp

Espero ter ajudado.

3

Acredito que tenha encontrado a solução que você descreveu: https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option

São checkbox dentro do 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>

2

Você pode fazer isso apenas adicionando o atributo multiple no seu select.

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

Caso queira melhorar o visual e deixar mais sugestivo você pode por um mensagem para o usuário em uma label por exemplo e também melhorar o visual utilizando css.

Vou demonstrar abaixo como fica o select multiple utilizando o Plugin jquery select2 que eu acredito ser muito prático:

$(".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>

2

Fiz um script à mão (usando jQuery) que substitui um <select> de múltipla escolha por um dropdown com checkbox para cada opção.

Como funciona:

Adicionei 2 divs abaixo do <select> para receber o dropdown.

O script esconde o <select> e cria um dropdown nas divs baseado nas informações do <select>.

Quando um checkbox é marcado, o <option> correspondente do <select> oculto é selecionado, recebendo o atributo selected="selected". Quando é desmarcado, o atributo é removido.

$(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .