Obtendo o valor de seleção múltipla

[Mythology]

Detalhes da questão

Endereço do fórum: http://pokemyrpg.forumeiros.com
Versão do fórum: phpBB3

Descrição

Hey.
Na calculadora de dano do meu rpg (link) eu tenho a opção Estados Negativos. Eu vou aumentar o número de opções para diminuir o tamanho da calculadora e eu não queria fazer algo como:

1 - Paralisado
2 - Burn
3 - Confuso
4 - Paralisado e Burn
5 - Paralisado e Confuso
6 - Paralisado Burn e Confuso
7 - Confuso e Burn

Pesquisei um pouco e descobri que existia algo que eu tinha em mente que é o multiple select, eu o coloquei em prática não funcionou muito bem no meu caso. Eu fiz isso aqui pra testar.

Código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  <script type="text/javascript">

$(document).ready(function() {
   $("#multiplesel").click(function() {
      var  estado = $("#estado").val();
      var  teste = $("#teste").val();
      
      switch (estado) {
      case ("1"):
      teste = 10;
      $("#teste").val(parseInt(teste));
      break;
      case ("2"):
      teste2 = 30;
      $("#teste2").val(parseInt(teste2));
      break;
   case ("3"):
   teste = 50;
      $("#teste").val(parseInt(teste));
      teste2 = 50;
      $("#teste2").val(parseInt(teste2));
      break;
         
      }

$("#teste").val(parseInt(teste));

      });
});
</script>

 
 <select id="estado" multiple="multiple">
<option value="0">Nenhum</option>
<option value="1">Paralisado</option>
<option value="2">Burn</option>
<option value="3">Paralisado e Burn</option>

            </select>

  <input id="multiplesel" type="button" value="Calcular!" />
                         
                         
                              <input type="text" id="teste" />
                                <input type="text" id="teste2" />

Código:

 <select id="estado" multiple="multiple">

Com o multiple ela não funciona de jeito nenhum. Alguém sabe o que estou fazendo de errado? Resumindo eu queria poder selecionar paralisado e burn ao mesmo tempo no select, sem ter que criar uma terceira opção. Na calculadora "paralisado" diminui a speed e "burn" corta o ataque na metade, embora isso não seja muito importante no problema.

[Kyo Panda]

Tente esse:

Código:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
   (function($) {
      'use strict';
      
      $(function() {
         var $teste = $('#teste');
         var $estado = $('#estado');
         
         $('#multiplesel').on('click', function() {
            var estado = $estado.val();
            
            if (estado === null) {
               $teste.val(0);
               return;
            }
            
            var valor = 0;
            
            $.each(estado, function() {
               switch (this) {
                  case '1':
                     valor += 10;
                     break;
                  case '2':
                     valor += 30;
                     break;
                  case '3':
                     valor += 50;
                     break;
               }
            });
            
            $teste.val(valor);
         });
      });
   }(jQuery));
</script>
 
<select id="estado" multiple="multiple">
   <option value="0">Nenhum</option>
   <option value="1">Paralisado</option>
   <option value="2">Burn</option>
   <option value="3">Paralisado e Burn</option>
</select>
 
<input id="multiplesel" type="button" value="Calcular!" />
                        
<input type="text" id="teste" />

https://codepen.io/anon/pen/dWrmgp

o/

[Mythology]

Valeu, vou ver o consigo fazer com isso. ^^

[Kyo Panda]

o/

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.