Working with Array and selecting a specific Input

Asked

Viewed 118 times

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 it based on select to show input for his input.

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 input type element appears on the screen, and all others are with display: none;

However I cannot use an extra class to differentiate. What I had as idea was to use an array, and make a For, but I had no evolution with it.

javascript jquery
  • 1

    can’t use id?

  • not Marconi the idea is actually to use maybe a Sort and do the if`s to compare whether the val() corresponds to the input. It’s pretty crude example, why the idea is to actually use the array and make Indice matching.

  • 1

    I understood that according to the Dice of the first selected select select?

  • That’s right, something like A = 1, B = 2 and so on

4 answers

4


Use the property HTMLSelectElement.selectedIndex as a function argument .eq() to select the <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>
<select name='options'>
  <option value="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" />

  • +1 by selectedIndex, will already serve me for other things. I will edit my answer using the property.

1

Thus:

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>
<select name='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" />

1

So, see if this way helps.

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

EDITED: Using the selectedIndex quoted by @Sanction replaces switch and got 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>
<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" />

1

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

insert link description here

Look that basically I take the value of the input, I look for the obj and I show him, very simple.

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

Look and tell me if it worked!

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.