Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

paesleandro

[Resolvido] Combobox com checkbox + mysql

Por , em Javascript

Recommended Posts

paesleandro    0

paesleandro
Postado

boa noite!

 

Pessoal, seguinte, vi em um site uma combobox (pelo menos parecia ser uma combo) que quando eu clicava, aparecia abaixo dela uma lista de opção só que com checkbox, o que eu achei muito bom, pois eu clico na combo e aparece as opções com checkbox e posso selecionar mais de uma opção na combobox.

 

Acho que deve ser alguma coisa com DIV...

 

Queria saber se alguém sabe aonde posso conesguir este script, ou se alguém teria o codigo fonte deste script, segue imagem abaixo para uma melhor explicação do quero dizer:

 

Imagem Postada

 

abraços,

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Basta saber trabalhar com ids e display "none" ou "block".

Existem muitas possibilidades de algoritmo para isso. Vou mostrar uma maneira possível:

<html>
<head>

<style type="text/css">
.titulo {font-family:tahoma,arial,verdana; font-size:18px; color:#000080}
.divChecks {display:none; width:200px; height:100px; overflow:auto; border:1px solid; margin-top:3px; font-family:tahoma,arial,helvetica; font-size:11px;}
</style>
<script type="text/javascript">
function mostrarDIV(vl) {
//Apagando todos que porventura estejam abertos:
for (var i=1; i<=3; i++) {
	objDiv1 = document.getElementById("roupas"+i);
	objDiv1.style.display = "none";	
}

	//Abrir div específico;
	if (vl != "") {
		var objDiv2 = document.getElementById("roupas"+vl);
		objDiv2.style.display = "block";
	}
}

</script>
</head>
<body>
<form name="form1" action="" method="post">
<span class="titulo">Selecione a vestimenta:</span>
<br />
<select id="opcoes1" name="opcoes1" style="width:200px" onchange="mostrarDIV(this.value)">
<option value=""></option>
<option value="1">Camisas</option>
<option value="2">Calças</option>
<option value="3">Adicional</option>
</select>

<div id="roupas1" class="divChecks">
<input type="checkbox" name="mangalonga" value="Manga Longa"> Manga longa
<br /><input type="checkbox" name="mangacurta" value="Manga Curta"> Manga curta
<br /><input type="checkbox" name="golaapolo" value="Gola Apolo"> Gola Apolo
<br /><input type="checkbox" name="camisasocial" value="Camisa social"> Camisa social
<br /><input type="checkbox" name="escavada" value="Escavada"> Escavada
<br /><input type="checkbox" name="estampabordada" value="Estampa bordada"> Estampa bordada
</div>

<div id="roupas2" class="divChecks">
<input type="checkbox" name="jeans" value="Jeans"> Jeans
<br /><input type="checkbox" name="sarja" value="Sarja"> Sarja
<br /><input type="checkbox" name="bermuda" value="Bermuda"> Bermuda
</div>

<div id="roupas3" class="divChecks">
<input type="checkbox" name="relogio" value="Relógio"> Relógio
<br /><input type="checkbox" name="pulseira" value="Pulseira"> Pulseira
<br /><input type="checkbox" name="colar" value="Colar"> Colar
</div>

</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

paesleandro    0

paesleandro
Postado

Basta saber trabalhar com ids e display "none" ou "block".

Existem muitas possibilidades de algoritmo para isso. Vou mostrar uma maneira possível:

<html>
<head>

<style type="text/css">
.titulo {font-family:tahoma,arial,verdana; font-size:18px; color:#000080}
.divChecks {display:none; width:200px; height:100px; overflow:auto; border:1px solid; margin-top:3px; font-family:tahoma,arial,helvetica; font-size:11px;}
</style>
<script type="text/javascript">
function mostrarDIV(vl) {
//Apagando todos que porventura estejam abertos:
for (var i=1; i<=3; i++) {
	objDiv1 = document.getElementById("roupas"+i);
	objDiv1.style.display = "none";	
}

	//Abrir div específico;
	if (vl != "") {
		var objDiv2 = document.getElementById("roupas"+vl);
		objDiv2.style.display = "block";
	}
}

</script>
</head>
<body>
<form name="form1" action="" method="post">
<span class="titulo">Selecione a vestimenta:</span>
<br />
<select id="opcoes1" name="opcoes1" style="width:200px" onchange="mostrarDIV(this.value)">
<option value=""></option>
<option value="1">Camisas</option>
<option value="2">Calças</option>
<option value="3">Adicional</option>
</select>

<div id="roupas1" class="divChecks">
<input type="checkbox" name="mangalonga" value="Manga Longa"> Manga longa
<br /><input type="checkbox" name="mangacurta" value="Manga Curta"> Manga curta
<br /><input type="checkbox" name="golaapolo" value="Gola Apolo"> Gola Apolo
<br /><input type="checkbox" name="camisasocial" value="Camisa social"> Camisa social
<br /><input type="checkbox" name="escavada" value="Escavada"> Escavada
<br /><input type="checkbox" name="estampabordada" value="Estampa bordada"> Estampa bordada
</div>

<div id="roupas2" class="divChecks">
<input type="checkbox" name="jeans" value="Jeans"> Jeans
<br /><input type="checkbox" name="sarja" value="Sarja"> Sarja
<br /><input type="checkbox" name="bermuda" value="Bermuda"> Bermuda
</div>

<div id="roupas3" class="divChecks">
<input type="checkbox" name="relogio" value="Relógio"> Relógio
<br /><input type="checkbox" name="pulseira" value="Pulseira"> Pulseira
<br /><input type="checkbox" name="colar" value="Colar"> Colar
</div>

</form>
</body>
</html>

bom dia!!

 

muito show! mas como eu pegaria os valores do checkbox? tipo, cada vez que eu fosse selecionando ia aparecendo na combo (1 selecionado, 2 selecionado, 3 sel...etc), dai eu daria um OK quando terminasse de selecionar, desaparecia as checkbox e na combo ficaria esta informação?

 

É muito complicado? se puder ajudar concerteza ficarei grato e acho que vários usuários tbm...

 

abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Não entendi muito bem. Você quer enviar os valores para a combobox principal (id="opcoes1") ou quer criar em outra combobox? Qual a intenção de você criar outra combobox, pois se os checkboxes já estão selecionados, não há necessidade de ter de selecionar a opção novamente (ou seja, 2 vezes)? E os valores que já estão por "default" na combobox "opcoes1" seriam alterados?

Compartilhar este post

Link para o post
Compartilhar em outros sites

paesleandro    0

paesleandro
Postado

Não entendi muito bem. Você quer enviar os valores para a combobox principal (id="opcoes1") ou quer criar em outra combobox? Qual a intenção de você criar outra combobox, pois se os checkboxes já estão selecionados, não há necessidade de ter de selecionar a opção novamente (ou seja, 2 vezes)? E os valores que já estão por "default" na combobox "opcoes1" seriam alterados?

 

 

Carlo Klonder, primeiramente muito obrigado pela atenção, desculpe-me por não conseguido me explicar melhor, mas graças a Deus consegui achar exatamente o que eu queria, segue link abaixo do que eu estava procurando... vou deixar para você ver e para o pessoal que se interessar.

 

Plugin Multiselect

 

valeu e abraços!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito