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

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">

CodePudding user response：

$('#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">