根据州选择动态显示/隐藏City标签的联动功能实现需求

要实现仅当选择Country=USA且State=Texas时显示City标签，选择Country=USA且State=New York时隐藏City标签的功能，我们可以基于现有代码做以下修改：

1. 调整HTML结构 #

将City的标签和下拉框包裹在一个单独的容器中，方便统一控制显示/隐藏：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  <div class="col-md-4">

    <!-- Country dropdown -->
    <label for="country">Country</label>
    <select class="form-control" id="country">
      <option value="">Select Country</option>
      <?php
                    $query = "SELECT * FROM countries";
                    $result = $con->query($query);
                    if ($result->num_rows > 0) {
                        while ($row = $result->fetch_assoc()) {
                            echo '<option value="'.$row['id'].'">'.$row['country_name'].'</option>';
                        }
                    }else{
                        echo '<option value="">Country not available</option>';
                    }
                    ?>
    </select>
    <br />

    <!-- State dropdown -->
    <label for="state">State</label>
    <select class="form-control" id="state">
      <option value="">Select State</option>
    </select>
    <br />

    <!-- City dropdown 新增容器包裹 -->
    <div id="city-container" style="display: none;">
      <label for="city">City</label>
      <select class="form-control" id="city">
        <option value="">Select City</option>
      </select>
    </div>

  </div>
</form>

注：修正了原State标签的for属性错误（原代码写的是for="country"，应该改为for="state"），同时默认隐藏City容器。

2. 修改JavaScript逻辑 #

添加一个检查显隐状态的函数，并在Country和State的change事件中调用该函数：

$(document).ready(function() {
  // 定义控制City显隐的函数
  function toggleCityVisibility() {
    const selectedCountryText = $("#country option:selected").text().trim();
    const selectedStateText = $("#state option:selected").text().trim();

    // 根据规则判断显示/隐藏
    if (selectedCountryText === "USA" && selectedStateText === "Texas") {
      $("#city-container").show();
    } else if (selectedCountryText === "USA" && selectedStateText === "New York") {
      $("#city-container").hide();
      $("#city").html('<option value="">Select city</option>'); // 隐藏时重置City选项
    } else {
      $("#city-container").hide();
      $("#city").html('<option value="">Select city</option>');
    }
  }

  // Country dependent ajax
  $("#country").on("change", function() {
    var countryId = $(this).val();
    $.ajax({
      url: "action.php",
      type: "POST",
      cache: false,
      data: {
        countryId: countryId
      },
      success: function(data) {
        $("#state").html(data);
        $('#city').html('<option value="">Select city</option>');
        // 切换国家后检查City显隐状态
        toggleCityVisibility();
      }
    });
  });

  // state dependent ajax
  $("#state").on("change", function() {
    var stateId = $(this).val();
    $.ajax({
      url: "action.php",
      type: "POST",
      cache: false,
      data: {
        stateId: stateId
      },
      success: function(data) {
        $("#city").html(data);
        // 切换州后检查City显隐状态
        toggleCityVisibility();
      }
    });
  });

  // 页面初始化时检查一次
  toggleCityVisibility();
});

说明：

• 这里通过选项文本判断（USA/Texas/New York），如果数据库中对应的ID固定，也可以用ID判断（更可靠，避免文本变更），比如：

  const selectedCountryId = $("#country").val();
  const selectedStateId = $("#state").val();
  // 假设USA的ID是1，Texas的ID是2，New York的ID是3
  if (selectedCountryId === "1" && selectedStateId === "2") { ... }
  

• 隐藏City容器时同步重置City的选项，避免残留之前的选择。

3. Action.php无需修改 #

原有的Action.php逻辑保持不变，依然负责根据Country/ID获取对应的State/City选项。

内容的提问来源于stack exchange，提问作者OmerAD