Bom dia galera!
Bom cabei de montar um sistema aqui na empresa para jogar item de uma select para outra com JQuery.
Clique aqui para ver um exemplo
Bom agora vamos por a mão na massa
Eu criei com a versão 'jquery-1.1.3.1.mim.js'
Crie um arquivo chamado 'arquivo.html' e cole o seguinte código:
>CODE <<>
<html>
<head>
<title>Manipulando Select com JQuery</title>
<script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="mudarColuna.js"></script>
<style>
.tamanhoSelect{
width: 200px;
}
</style>
</head>
<body>
<form id="frm" name="frm">
<select id="select1" multiple="multiple" class="tamanhoSelect">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
</select>
<div id="add">
<a href="#" title="Mover para baixo">
<span>Mover para baixo</span>
</a>
</div>
<div id="remove">
<a href="#" title="Mover para cima">
<span>Mover para cima</span>
</a>
</div>
<select id="select2" multiple="multiple" class="tamanhoSelect">
</select>
</form>
</body>
</html>
Bom agora que temos nosso html vamos fazer nosso 'arquivo.js'
Crie um arquivo chamado 'mudarColuna.js' e coloque dentro da mesma pasta do html
abra o arquivo 'mudarColuna.js' e cole este código:
>CODE <<>
$(document).ready(function() {
$("#add").click(function(){
moverItem("select1", "select2");
});
$("#remove").click(function(){
moverItem("select2", "select1");
});
});
function adicionarItem(select, val, tex, cla){
$("#"+select).append("<option value=' "+val+" ' class=' "+cla+"
'>"+tex+"</option>");
}
function moverItem(de, para){
$("#"+de+" option:selected").each(function(){
adicionarItem(para, $(this).val(), $(this).text(), $(this).attr("class"));
$(this).remove();
});
}
Pronto!!
Muito facil néh ;D
Nosso tutorial da semana acaba por aqui..
Qualquer dúvida ou ajuda deixe no post.
Até mais galera
;x
6 comentários:
achei esse plugin aqui bem interessante
http://www.texotela.co.uk/code/jquery/select/
Muito legal! vlws pela dica tbm ;)
Olá, muito boa sua matéria, me ajudou muito, muito obrigado.
QUE MERDA E ESSA ??????
Tem um plugin mesmo, mas esse artigo está ótimo! Parabéns pela iniciativa e criatividade!
---
Att. Rodolfo Nogueira
UFPR - Música
Curitiba / Paraná
Muito bom, me ajudou muito. Parabéns!! Há, combinei a idéia com estilos do bootstrap e ficou bem legal!!
Postar um comentário