Display input based on the option of a select

Question

Display input based on the option of a select

Navigation

#1 by (2 votes)

2

I want to display a input based on the option that I choose through a select .

If I select 1 it shows input 1 , if I select 2 it shows 2 but gives hide() no 1 . Currently the code looks like this:

$('.select').on({change: listChildren}).trigger('change');

function listChildren(){
  
  if ( $(this).val() != '' ) {
    children = $('option').val();
    $("#" + $(this).val() ).show();
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><selectname='options'class="select">
  <option value=''>Select</option>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

<input type="text" placeholder="exemplo 1" class="one" style="display: none" id="option-1"/>
<input type="text" placeholder="exemplo 2" class="two" style="display: none" id="option-2"/>

I'm able to show but can not do hide() .

javascript jquery

asked by anonymous 26.11.2015 / 21:38

1 answer

Login screen acting incoherent How to generate an XML file from a form in PHP?

score 2 · Accepted Answer

Add a class to all input . Then just put a hide() in class and thus in the group and a show() by id in the specific element:

      $('.select').on({change: listChildren}).trigger('change');

      function listChildren(){

        if ( $(this).val() != '' ) {
          children = $('option').val();
          $(".input").hide();
          $("#" + $(this).val() ).show();
        }

      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><selectname='options'class="select">
      <option value=''>Select</option>
      <option value='option-1'>Option 1</option>
      <option value='option-2'>Option 2</option>
      <option value='option-3'>Option 3</option>
    </select>

    <input type="text" placeholder="exemplo 1" class="one input" style="display: none" id="option-1" />

    <input type="text" placeholder="exemplo 2" class="two input" style="display: none" id="option-2" />