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 exemploBom 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 htmlabra 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
