Javascript 如何在更改选择框选项时显示和隐藏窗体控件

我有两个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>

试试这个Jquery代码

$function{ $city.hide； }; $country.changefunction{ 如果$country.val！= { $city.show； }否则{ $city.hide； } }; 选择国家 1. 2. 选择城市 1. 2.

---

根据您的需求添加了一个示例。所以你需要做以下的事情

隐藏两个控件 根据“选择”中的值启用控制 功能营养不良{ $'cityText'。隐藏； $‘城市’。隐藏； } $document.readyfunction{ $'country'。关于'change'，函数{ 墨守成规； var country=$.trimthis.value.toLowerCase； 如果国家！==巴基斯坦{ $'cityText'.show； }否则{ $‘城市’节目； } }; }; .隐藏{ 显示：无； } .表演{ 显示：内联； } 选择 美国 英国 巴基斯坦 印度 伊朗 尼泊尔 选择 城市1 城市2 城市3 城市4 城市5 城市6 使用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>

---

我会试着用一个可行的例子来回答这个问题。去掉并展平所有PHP，因为它与问题无关。我想你正在寻找相关的下拉列表。你不需要隐藏和显示，你可以做任何你想做的事情来显示子对象的选定值取决于父对象它对我有效，但表单无法提交它显示以下错误name='city'的无效表单控件不可聚焦。Physical.php:1你能帮我吗？这个页面可能会有帮助。您可能需要从这些输入元素中删除必需的属性，因为您正在设计一个表单，而这两个元素都不会被使用。