Silici0 :: Blog

Do SelectBox para o ListBox

Tutorialzinho para criarmos um selectbox e um listbox apartir do formulário em html e então através do JQuery adicionarmos os itens no Listbox e então pegarmos o valor por método POST no PHP.

A idéia do tutorial seria uma lista de itens adicionado a um listbox, formando um carrinho de compras dos itens, para depois então enviarmos tudo de uma vez so através do POST do form, gerando uma array para o PHP, é um dos clássicos em programação. Como muita gente não sabe da possibilidade em html/php deixo um tutorial para se ter uma idéia de como utilizar esse recurso.
Sem mais delongas vamos ao código, primeiramente o form, claramente veremos que o nosso listbox na verdade é um selectbox com a tag de multiple (virando assim um listbox):

HTML:

<form method="post" enctype="multipart/form-data" name="F1" id="F1">
<select name="func" id="func">
<option value="1">Numero 1</option>
<option value="2">Numero 2</option>
<option value="3">Numero 3</option>
</select>
<input type="button" name="add" value="Adicionar" />
<select multiple="multiple" id="eq" name="eq[]" size="7">
</select>
<input name="Submit2" type="submit" id="EnvioDados" value="ENVIAR DADOS">
</form>

Agora podemos escrever o código do JQuery com DOM para facilitar nossa vida:

JAVASCRIPT:

$().ready(function() {
//Click do botão ADD
$("input[@name=add]").click(function(){
var id_selecionado = document.F1.func.selectedIndex;
var valor_selecionado = document.F1.func.options[id_selecionado].text;
var id_indice_selecionado = document.F1.func.options[id_selecionado].value;
$('select[@id=eq]').append('<option value="'+ id_indice_selecionado +'">'+ valor_selecionado +'</option>');
//desabilita o valor adicionado;
document.F1.func.options[id_selecionado].disabled=true;
});
// Click do botao do submit
$('input[@name=Submit2]').click(function(){
var x=document.getElementById("eq");
for (i=0;i<x.length;i++){
x.options[i].selected=true;
}
return true;
});
})

Muito legal né? Mas e para remover ? Bom, para remover eu recomendo dar uma procurada na net sobre um plugin para ListBox usando o JQuery, vocês não querem tudo na mão né? Dúvidas e sugestões é so comentar.

6 Comments »

hoohoho, pirou geral hein?!!! D

[]´s
R-ealitY

Comment by R-ealitY — Outubro 1, 2007 #

omg!

Entre em contato...

silici0@gmail.com

quem e vivo sempre aparece!

Abracos

Comment by silici0 — Outubro 2, 2007 #

Dá um exemplo prático...

Comment by DGmike — Outubro 2, 2007 #

É a falta de tempo... vou ver se crio um hoje.

Abraços

Comment by silici0 — Outubro 2, 2007 #

Rapaz, gostei muito do tutorial. Eu sempre tive essa dificuldade pra mexer com a tag select. Usei ele pra fazer uma página do meu portal de notícias.
Espero que continue ajudando assim todos os blogueiros por ai afora.