'jQuery for showing different text field showing when select two different items in selectbox

How to display the text fields when choosing different option from the selectoption (if select USA option USA text field need to show)?

<select name="cntry"> 
<option value="us">USA</option>
<option value="uk">uk</option>
</select >
<input type="text" value="USA" name="USA">
<input type="text" value="UK" name="UK">
javascripthtmljquery


Solution 1:[1]

$('#country').on('change', function() {
  $('input').each(function() {
    $(this).css('display', 'none');
  });
  if (this.value === 'us') {
    $('input[name="USA"]').css('display', 'initial')
  }
  if (this.value === 'uk') {
    $('input[name="UK"]').css('display', 'initial')
  }
});
input {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country" name="cntry">
  <option selected disabled hidden>Select your Country</option>
  <option value="us">USA</option>
  <option value="uk">uk</option>
</select>
<input type="text" value="USA" name="USA">
<input type="text" value="UK" name="UK">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alireza

Related Questions