Working with Array and selecting a specific index

Navigation
2

In my studies in JS I have the following code: 

<select name='options'>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>  

<input class="input" type="text" />
<input class="input" type="text" />
<input class="input" type="date" />

I need that based on the select it shows the input referring to his index.

Example: If I selected A, it shows input 1, if I selected B it hides 1 and shows 2, and so on. The idea is that only one element of the type input appears on the screen, and all others are with display: none;

But I can not use an extra class to differentiate. What I had as idea was to use an array, and make a For, but I did not evolve with that.

    
asked by anonymous 30.11.2015 / 17:17

4 answers

4

Use the HTMLSelectElement.selectedIndex property as a function argument .eq() to select <input> by index. 

$('[name=options]').bind('change', function(){
    $('.input').hide() // ocultar todos
      .eq(this.selectedIndex).show(); // selecionar pelo índice e exibir
}).trigger('change'); // forçar execução imediata
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><selectname='options'><optionvalue="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>  

<input class="input" type="text" value="A" />
<input class="input" type="text" value="B" />
<input class="input" type="text" value="C" />
    
30.11.2015 / 17:37
1

Friend I made an example in jquery for you to test.

insert the link description here

Look, basically I get the value of the input, I look for the obj and I show it, very simple. 

$(document).ready(function(){
$('.input').hide();
$("select[name='options']").val(-1);
$("select[name='options']").change(function(){
    $('.input').hide();
    $('#'+$(this).val()).show();
});
});

Watch and talk if it worked!

    
30.11.2015 / 17:35
1

So, see if that helps.

I think the way to check the index should only be improved, so I think it's very manual, but it's already a path.

EDIT : Using the selectedIndex cited by @ Sanction replaces the switch and got a cleaner code. 

var listaInputs = $('input');
var listaOption = $('option');

$('select[name="options"]').change(function() {
  listaInputs.hide();
  $(listaInputs[this.selectedIndex]).show();
});

$('select[name="options"]').trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectname='options'><optionvalue="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>
<input class="input" type="text" />
<input class="input" type="text" />
<input class="input" type="date" />
    
30.11.2015 / 17:33
1

So: 

var input = $("input");
$('#opcoes').change(function() {
  var index = $(this)[0].selectedIndex;
  input.hide();
  $(input[index]).show();
  input[index].value = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><selectname='options'id="opcoes">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>
<input class="input" type="text" />
<input class="input" type="text" />
<input class="input" type="date" />
    
30.11.2015 / 18:09
Is there any way to call an action when the method does not exist in an object in javascript? Capitalize string with accented characters