Как показать и скрыть элемент управления формы при изменении параметров окна выбора

Question

У меня есть 2 поля выбора в html. Первый для страны, а второй для города. Мне нужно показать текстовое поле, когда пользователь выбирает страну, отличную от Пакистана, и показать раскрывающийся список для города, если пользователь выбирает выпадающий список страны из Пакистана.

Вот мой код, который я пробовал:

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
  <div class="form-group col-md-3">
    <label for="cc-payment" class="control-label mb-1">Birth Country</label>
    <select class="form-control" name="Birth_Country" id="Birth_Country" style="color:  black;" required>
      <option value="">Please Select Birth Country</option>
      <?php
      $sel_cus = "select Country_Name from personal_country_name Order By Country_Name";
      $res_cus = mysqli_query($connection, $sel_cus);
      while ($row = mysqli_fetch_array($res_cus)) {?>
      <option value="<?php echo $row['Country_Name'];?>"><?php echo strtoupper($row['Country_Name']);?></option>

      <?php
      }
      ?>
    </select>
  </div>
  <div class="form-group col-md-3">

    <label for="cc-payment" class="control-label mb-1">Birth City</label>

    <select class="  form-control  " name="Birth_City" id="Birth_City" style="color:  black;" required>
      <option value="">Please Select Birth City</option>
      <?php
      $sel_cus = "select city_name from personal_city_name order By city_name";
      $res_cus = mysqli_query($connection, $sel_cus);
      while ($row = mysqli_fetch_array($res_cus)) {?>
      <option value="<?php echo $row['city_name'];?>"><?php echo strtoupper($row['city_name']);?></option>

      <?php
      }
      ?>
    </select>
    <input type="text" autocomplete="off" onkeyup="this.value = this.value.toUpperCase();" class="form-control   "
           name="Birth_City" id="other" style="color:  black;" value="<?php echo $data['Birth_City']?>" required
           data-toggle="tooltip" title="Birth City" placeholder="Birth City"/>
  </div>
  <button type="submit" class="btn btn-primary pull-right"
          style=" margin-right: 430px; width: 105px; height: 42px; margin-top: 22px; " value="Save" name="Save"
          id="Save">Save
  </button>
</form>

Answer 1

Добавлен пример, основанный на вашем требовании. Так что вам нужно сделать следующие вещи.

1. Скрыть оба элемента управления
2. Включить управление на основе значения из выбора

function hideBoth() {
  $('#cityText').hide();
  $('#city').hide();

}
$(document).ready(function() {
  $('#country').on('change', function() {
    hideBoth();
    var country = $.trim(this.value).toLowerCase();
    if (country !== "pakistan") {
      $('#cityText').show();
    } else {
      $('#city').show();
    }
  });
});

.hide {
  display: none;
}

.show {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="country">
  <option value="">Select</option>
  <option value="USA">USA</option>
  <option value="UK">UK</option>
  <option value="Pakistan">Pakistan</option>
  <option value="India">India</option>
  <option value="Iran">Iran</option>
  <option value="Nepal">Nepal</option>
</select>

<select id="city" class="hide">
  <option value="">Select</option>
  <option value="1">City 1</option>
  <option value="2">City 2</option>
  <option value="3">City 3</option>
  <option value="4">City 4</option>
  <option value="5">City 5</option>
  <option value="6">City 6</option>
</select>

<input type="text" placeholder="Enter your city" class="hide" id="cityText" />

Answer 2

Попробуйте это Jquery код

$(function(){
$("#city").hide();
});
$("#country").change(function(){
if($("#country").val() !="" )
{
$("#city").show();
} else {

$("#city").hide();
}
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country">
<option value="">select country</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="city">
<option value="">select city</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

Answer 3

использовать jquery

<script>
$(document).ready(function(){
$("#Birth_Country").onchange(function(){
$country = $('#Birth_Country').val();
if ($country == "Pakistan") {
$("#Birth_City").show();
$("#other").hide();
}else {
$("#other").show();
$("#Birth_City").hide();
}
}
});
</script>

включить файл сценария в php также jquery файл

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>