Combobox com JS e PHP sem repetir valores

[kernelpanic777 0]

Olá amigos, estou a 3 dias tentando montar um modal em minha aplicação e não consigo ... Tentei muita coisa, agora parece que estou perdendo o raciocínio ...

Preciso montar uma tela com 8 select combobox em um modal, o valor que ficará dentro de cada <option> não poderá se repetir e conforme vou selecionando a opção, o próximo combobox não exibira mais o valor que já foi selecionado, isto até restar o ultimo combobox com apenas 1 valor para escolha.

Quero faze exatamente como aqui:

http://www.konkuri.com/tournaments/b3e77a73b4/matches/configure

Obrigado.

Segue o que fiz até aqui:

$SQL = "SELECT Eqp_Cod, Eqp_Nome FROM equipes WHERE Eqp_Fase = 'oitavas' ORDER BY Eqp_Nome ASC";
$resultado = mysql_query($SQL, $conn);
while ($linha = mysql_fetch_array($resultado)){
$arrEquipes [] = array ('eqp_cod'=>$linha['Eqp_Cod'],'eqp_nome'=>$linha['Eqp_Nome'],);
}

e dentro do 1º select (combobox) :

foreach($arrEquipes as $info) {

echo("<option value='".$info['eqp_cod']."'>".$info['eqp_nome']."</option>");
}

A partir daqui não sei mais como fazer ...

[angelorubin 142]

Você pode fazer da seguinte forma:

• Criar uma janela modal: "no braço", jquery ui, twitter bootstrap
• Dentro da modal buscar/exibir os dados dos selects com ajax: "no braço", jquery ajax
• Esconder/desabilitar o select após a escolha e ir para o próximo select

Qualquer dúvida é só postar.

[kernelpanic777 0]

Você pode fazer da seguinte forma:

• Criar uma janela modal: "no braço", jquery ui, twitter bootstrap
• Dentro da modal buscar/exibir os dados dos selects com ajax: "no braço", jquery ajax
• Esconder/desabilitar o select após a escolha e ir para o próximo select

Qualquer dúvida é só postar.

Muito Obrigado pela ajuda angelorubin, meu problema esta sendo na última etapa de que descreveu ...

• Esconder/desabilitar o select após a escolha e ir para o próximo select

Isso não consigo fazer ...

[angelorubin 142]

Como está tentando?

[kernelpanic777 0]

Consegui Web Developer !

 

Após muitas pesquisas, tentativas e erros, fiz assim e funcionou como eu queria.

 

$("select").change(mostraEqp);

function mostraEqp(){

var eqp_cod = $(this).val();

var eqp_nome = $(this).find("option:selected").text();

var id_select = $(this).attr('id');

//alert (teste);

//alert (eqp_cod);

$('option').each(function(){

if($(this).attr('value') == eqp_cod) {

// alert ($(this).attr('id'));

$(this).remove();

}

});

$("select[name="+id_select+"]").empty();//retira os elementos antigos

var option = document.createElement('option');

$( option ).attr( {value : eqp_cod} );

$( option ).append( eqp_nome );

$("select[name="+id_select+"]").append( option );

};