Ajuda com caixas de selecção interligadas

bpinto · December 3, 2010 at 09:22 PM

Boa noite pessoal

Necessito de uma ajuda

tenho de efectuar um form com varias caixas de selecção, entre as quais 3 delas tem de estar interligadas, sendo que mediante a escolha da 1ª caixa ira dar valores na 2ª e mediante a escolha da 2ª ira dar valores na 3ª.

A ideia é a 1ª escolhe-se o departamento, na 2ª ja so aparece os grupos desse departamento, escolhe-se o grupo que se quer, e na 3ª ja so aparece os utilizadores desse grupo.

Não sei se estar explicito, mas será a melhor forma de explicar.

Desde ja o meu obrigado

brunoais · December 3, 2010 at 09:42 PM

Deves querer algo do tipo (confirma sff):

Um select box com os departamentos.

Qd o departamento está seleccionado, ele lê info e populariza o selectbox dos grupos do departamento.

Qd o grupo do departamento está seleccionado, ele populariza com a lista dos utilizadores desse grupo.

É isso?

bpinto · December 3, 2010 at 09:47 PM

Penso que será algo desse tipo, só não sei o que chamas populariza 😉

mas não quero janelas de popup, quero apenas que ele actualize a caixa seguinte.

eheheheh

Peço desculpa se estou a dizer alguma aberração.

brunoais · December 3, 2010 at 10:06 PM

Popularizar é preencher a selectbox com as opções

Edit:

Vê este script. Com algumas alterações ele faz o que tu queres:

http://www.javascriptkit.com/script/cut183.shtml

(acho que há um q faz mais exactamente o que tu queres, deixa ver se encontro)

Se pegares neste script:

http://www.javascriptkit.com/script/script2/triplecombo.shtml

e alterares o seu funcionamento para ajax tens o que queres.

bpinto · December 3, 2010 at 10:09 PM

Nesse casso sim.

Seleccionando a 1ª ele preencher a 2ª e assim sucessivamente.

lmalves · December 3, 2010 at 10:15 PM

Tens várias maneiras de fazer de isso mas apesar de não ser muito difícil também não é muito simples.

Se os valores forem fixos (sempre os mesmos) podes usar javascript, existem várias funções na net que é só aplicar.

Se vierem da base de dados ou usas só php ou então para ficar bonito podes usar AJAX (jquery faz isso bem).

Só por PHP podes adicionar o evento onchange à select e submetes o form com o 1º valor, depois de submeteres fazes a query para o segundo select (tb com o evento onchange) e depois igual para o 3º.

De qualquer forma podes procurar na net por "populate select javascript", php ou jquery conforme quiseres.

bpinto · December 3, 2010 at 10:18 PM

Ok

O que aconselhas???

Eu sou novo nisto, por isso qual quer das soluções para mim e novidade.

lmalves · December 3, 2010 at 10:27 PM

Os valores são fixos ou são da BD?

Se forem fixos penso que os links que o brunoais mandou funcionam bem, se for de BD aconselho o Jquery mas aviso já que não é muito directo para quem está a começar.

bpinto · December 3, 2010 at 10:30 PM

São de BD

bpinto · December 10, 2010 at 08:29 PM

oi pessoal

Peço desculpa, mas ja estou a deitar fumo e nao entendo como fazer.

Estou a utilizar o exemplo do

Se pegares neste script:

http://www.javascriptkit.com/script/script2/triplecombo.shtml

e alterares o seu funcionamento para ajax tens o que queres.

Mas realmente nao consigo mudar para fazer que actualize a 2 caixa dinamicamente, pois nao sei como ir buscar os valores ao mysql.

este é o codigo que tenho:

<?php
// pagina protegida, incluir script de verifica??o de login
//require 'verificarLogin.php';
include 'functions/functions.php';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt" dir="ltr">

<head>
  <title>Registos</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<FORM method="post" name="isc">
<table border="0" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td nowrap height="11">  


<select size="10" name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<?php    departamento()?>
</select>

<select size="10" name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>

<select size="10" name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>

<script>
<!--

/*
Triple Combo Script Credit
By Hamid Cheheltani/ JavaScript Kit (http://www.javascriptkit.com)
Visit http://javascriptkit.com for this and over 400+ other scripts
*/

var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("---Select2---"," ");

group[1][0]=new Option("Now Select This One"," ");
group[1][1]=new Option("JavaScript","47");
group[1][2]=new Option("CSS","46");
group[1][3]=new Option("Ajax","45");

group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("General News","115");
group[2][2]=new Option("Technology News","116");

var temp=document.isc.stage2


function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}



var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++)  {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++)  {
secondGroup[i][j]=new Array()  }}

secondGroup[0][0][0]=new Option("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---"," ");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("JavaScript Kit","http://javascriptkit.com");
secondGroup[1][1][2]=new Option("Dynamic Drive","http://www.dynamicdrive.com");
secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net");

secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("CSS Drive","http://www.cssdrive.com");
secondGroup[1][2][2]=new Option("CSS Library","http://www.dynamicdrive.com/style/");
secondGroup[1][2][3]=new Option("CSS Help Forums","http://www.codingforums.com/forumdisplay.php?f=13");

secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("Ajaxian","http://www.ajaxian.com");
secondGroup[1][3][2]=new Option("Ajax Scripts","http://www.javascriptkit.com/script/cutindex11.shtml");

secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("CNN","http://www.cnn.com");
secondGroup[2][1][2]=new Option("MSNBC","http://www.msnbc.com");
secondGroup[2][1][3]=new Option("ABC News","http://www.abcnews.com");

secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News.com","http://www.news.com");
secondGroup[2][2][2]=new Option("Wired","http://www.wired.com");

var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}

function redirect2(z){
window.location=temp1[z].value
}

//-->
</script>

	</td>
  </tr>
</table>
</FORM>

<p><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>


</body>
</html>

Depois tenho uma função para criar a caixa que fica aqui tambem:

function grupo1($p_valor,$valor){

liga();
$sql1="select * from grupo where ID_departamento=".$valor."";
$res1=mysql_query($sql1);

while ($lin1 = mysql_fetch_assoc($res1)) {
	$f++;
	$texto='';

	if($lin1['ID_grupo'] == $p_valor){
		$texto='selected';
	}
?>

    <option  <?php echo $texto; ?> value="<?php echo $lin1['ID_grupo']; ?>" > <?php echo ($lin1['nome']); ?></option>

<?php
}
    }
?>

Será que alguem me pode ajudar

ruimcosta · December 16, 2010 at 11:55 AM

Viva,

Espero ajudar:

Podes retirar o codigo que preparei propositadamente para este efeito. Está a funcionar.

Atanção que necessita de implementação de medidas de segurança.

Se alguem quiser testar e melhorar por favor disponibilizem aqui o código.

http://www.inovador.net/scripts_para_demo/combos.rar

Cumprimentos,

Rui Costa

bpinto · December 21, 2010 at 02:42 PM

Obrigado

Utilizei a solução e implementei mais uma caixa de selecção.

Penso que consegui fazer o prendido.

Agora tenho de criar uma solução para actualizar um caixa de selecção depois de fazer um insert na BD.

Desde já o meu obrigado a todos.

bpinto · December 22, 2010 at 10:37 PM

Nova ajuda

Aproveitando a solução do ruimcosta e adaptando para os valores que tenho de consultar e com caixas de selecção múltiplas, o meu objectivo era após a escolha da ultima caixa ter um botão para fazer o insert da BD do responsável na actividade, e seguidamente efectuar a actualização da quarta caixa de selecção onde se encontram os responsáveis da actividade.

Sign In

Ajuda com caixas de selecção interligadas

Recommended Posts

bpinto

brunoais

bpinto

brunoais

bpinto

lmalves

bpinto

lmalves

bpinto

bpinto

ruimcosta

bpinto

bpinto

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information