How to select more than one item in a Select Option

Question

How to select more than one item in a Select Option

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)

3

Hello, I need to choose more than one option in a select eg I could have a checkbox inside the select but I do not know how to do it, can you 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>

javascript html angularjs html5

asked by anonymous 11.10.2017 / 16:42

4 answers

1

I believe you have found the solution you described: link

They are checkbox inside the 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>

11.10.2017 / 17:16

0

You can do this just by adding the multiple attribute to your 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 leave more suggestive you can by a message to the user in a label for example and also improve the look using css .

I'll show below how select multiple gets using the javascript plugin 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><linkhref="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><labelfor="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>

11.10.2017 / 20:30

0

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

How it works:

I added 2% with% s below checkbox to receive div .

The script hides <select> and creates a dropdown in dropdown s based on <select> information.

When div is checked, the corresponding <select> of hidden checkbox is selected, receiving the <option> attribute. When it is 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><selectmultiplename="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>

11.10.2017 / 22:23

How do I create a showOptionDialog method that defaults to "no"? How to calculate the nth root of a number in C?

score 1 · Accepted Answer

You can create a normal select with the multiple tag in the freight, where the user selects by ctrl the multiple options in his select, when passed by post, would 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 = option1 & options = option2 & options = option3

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: link it's pretty cool and stylish.

On multi select, take a look at this documentation: link

I hope I have helped.