Jump to content
bpinto

Ajuda com caixas de selecção interligadas

Recommended Posts

bpinto

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

Share this post


Link to post
Share on other sites
brunoais

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?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
bpinto

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.

Share this post


Link to post
Share on other sites
brunoais

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.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
lmalves

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.

Share this post


Link to post
Share on other sites
bpinto

Ok

O que aconselhas???

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

Share this post


Link to post
Share on other sites
lmalves

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.

Share this post


Link to post
Share on other sites
bpinto

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

Share this post


Link to post
Share on other sites
ruimcosta

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


Abraços e beijinhos,Rui Costa

Share this post


Link to post
Share on other sites
bpinto

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.

Share this post


Link to post
Share on other sites
bpinto

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.