Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Biel.

Mudar item select option e exibir o valor correspondente em outro sele

Por , em Javascript

Recommended Posts

Biel.    9

Biel.
Postado
Mudar item select option e exibir o valor correspondente em outro select


Boa tarde a todos. Pessol gostaria de fazer o seguinte:

ao visualizar o codigo abaixo no browser iremos vê

no primeiro select 5+5 e

no segundo select 10


ao selecionar o item 6+6

gostaria que exibisse no segundo select 12 ou

ao selecionar o item 7+7 gostaria que exibisse no segundo select 14


e vice versa


Selecionar 10 e exibir 5+5

Selecionar 12 e exibir 6+6

Selecionar 14 e exibir 7+7

Pessoal, como estou iniciando meus estudos com javascript não seu por onde começar. :mellow:




<select name="aprendiz_a">  

 <option value="soma">5+5=</option>

 <option value="soma">6+6=</option>

 <option value="soma">7+7</option> 


</select>


<br><br>


<select name="aprendiz_b">  

<option value="resultado">10</option>

<option value="resultado">12</option>

<option value="resultado">14</option> 


</select>



Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<select name="count">
  <option value="10">5+5</option>
  <option value="12">6+6</option>
  <option value="14">7+7</option>
</select>

<br><br>

<select name="result">
  <option value="10">10</option>
  <option value="12">12</option>
  <option value="14">14</option>
</select>

<script>
(function(){
  'use strict';
  var $count = document.querySelector('select[name="count"]'),
      $result = document.querySelector('select[name="result"]');

  function selected($select, value) {
    var $options = $select.getElementsByTagName('option');
    for(var i=0; i < $options.length; i++) {
      if ($options[i].value === value)
        return $options[i].selected = true;
    }
  }

  $count.addEventListener('change', function(){
    var v = this.value;
    selected($result, this.value);
  });

}());
</script>

</body>
</html>
note que eu usei os values iguais para selecionar o outro select.

Se você quer que o javascript faça a conta "5+5" a partir da string, você terá que utilizar eval, que é uma má prática.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

William funcionou bem. Pequeno detalhe: se eu mudar o item do segundo select tipo seleciono 14, no primeiro select não exibe 7+7 ou seleciono 12 no primeiro select não exibe 6+6. gostaria muito de exibir o valor correspondente em ambos os select.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ai você tem q fazer a volta uê.. você leu o código ? entendeu ?

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<select name="count">
  <option value="10">5+5</option>
  <option value="12">6+6</option>
  <option value="14">7+7</option>
</select>

<br><br>

<select name="result">
  <option value="10">10</option>
  <option value="12">12</option>
  <option value="14">14</option>
</select>

<script>
(function(){
  'use strict';
  var $count = document.querySelector('select[name="count"]'),
      $result = document.querySelector('select[name="result"]');

  function selected($select, value) {
    var $options = $select.getElementsByTagName('option');

    for(var i=0; i < $options.length; i++) {
      if ($options[i].value === value) {
        return $options[i].selected = true;
      }
    }
  }

  $count.addEventListener('change', function(){
    var v = this.value;
    selected($result, this.value);
  });

  $result.addEventListener('change', function(){
    var v = this.value;
    selected($count, this.value);
  });

}());
</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Quando for responder um post, clique no REPONDER em preto abaixo do tópico e não no "citar", pois se não, você acaba fazendo um quote do meu post no seu, ficando tudo sem sentido.

 

Ou então, digite diretamente no textarea que aparece no final.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito