Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17684
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Selecionar alguns produtos para colocar em uma lista com soma de total

20-06-2016 18:29

Nesse post vou estar disponibilizando um script de lista de produtos feito com selects. Onde você pode mover os produtos entre as listas.

Ao selecionar os produtos, na segunda lista os produtos já listados vão estar com o total dos valores dos produtos.

O script necessita da biblioteca jQuery para funcionar.

<script src="jquery.js"></script> <script> $(function() { // função que calcula o valor total dos itens do segundo select function Total() { // soma total do segundo select / início var total = 0; $("#segundo > option").each(function() { total+=parseInt($(this).attr("data-valor")); $("#total").html(total.toFixed(2)); }); } // move opção selecionada da direita para esquerda $("#direita").click(function() { $("#primeiro").find(":selected").appendTo("#segundo"); Total(); }); // move todas opções da direita para esquerda $("#direita_todos").click(function() { $("#primeiro").children().appendTo("#segundo"); Total(); }); // move opção selecionada da esquerda para direita $("#esquerda").click(function() { $("#segundo").find(":selected").appendTo("#primeiro"); Total(); }); // move todas opções da esquerda para direita $("#esquerda_todos").click(function() { $("#segundo").children().appendTo("#primeiro"); Total(); }); // carregando o total do segundo select no carregamento Total(); }); </script> <select id="primeiro" multiple="multiple"> <option value="1" data-valor="1.00">um</option> <option value="2" data-valor="2.00">dois</option> </select> <select id="segundo" multiple="multiple"> <option value="3" data-valor="3.00">três</option> <option value="4" data-valor="4.00">quatro</option> </select> <br /> <input type="button" id="esquerda" value="<" /> <input type="button" id="direita" value=">" /> <input type="button" id="esquerda_todos" value="<<" /> <input type="button" id="direita_todos" value=">>" /> <div id="total"></div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado