显示隐藏 label 基于 select 下拉值

Question

我想隐藏和显示“城市”label。只有在我选择特定的“州”时才显示，如果不再隐藏它。

• Country=USA> State=Texas>显示城市 label。
• Country=USA> State=New York>隐藏城市 label

 $(document).ready(function() { // 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>'); } }); }); // 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); } }); }); });

 <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="country">State</label> <select class="form-control" id="state"> <option value="">Select State</option> </select> <br /> <!-- City dropdown --> <label for="country">City</label> <select class="form-control" id="city"> <option value="">Select City</option> </select> </div> </form> </div>

动作.php

<?php
// Include the database connection file
include('db_config.php');
 
if (isset($_POST['countryId']) && !empty($_POST['countryId'])) {
 
 // Fetch state name base on country id
 $query = "SELECT * FROM states WHERE country_id = ".$_POST['countryId'];
 $result = $con->query($query);
 
 if ($result->num_rows > 0) {
 echo '<option value="">Select State</option>';
 while ($row = $result->fetch_assoc()) {
 echo '<option value="'.$row['id'].'">'.$row['state_name'].'</option>';
 }
 } else {
 echo '<option value="">State not available</option>';
 }
} elseif(isset($_POST['stateId']) && !empty($_POST['stateId'])) {
 
 // Fetch city name base on state id
 $query = "SELECT * FROM cities WHERE state_id = ".$_POST['stateId'];
 $result = $con->query($query);
 
 if ($result->num_rows > 0) {
 echo '<option value="">Select city</option>';
 while ($row = $result->fetch_assoc()) {
 echo '<option value="'.$row['id'].'">'.$row['city_name'].'</option>';
 }
 } else {
 echo '<option value="">City not available</option>';
 }
}
?>

Answer 1

尝试在 state 依赖 ajax 请求的成功回调 function 中添加条件

success: function(data) {
    $("#city").html(data);
    if ($("#state").val() === "Texas") {
        $("#city").parent().prev("label[for='country']").show(); 
    } else {
        $("#city").parent().prev("label[for='country']").hide();  
    }
}

Answer 2

如果 label 包装 select 或 label 和 select 在一个 div 中会更容易，但你在这里

您可以只测试 state，因为我希望您没有其他国家/地区的 state 称为德克萨斯

这去任何地方

$("form").on("change", "select", function() {
  const country = $("#country").val();
  const state = $("#state").val();
  const show = country === "USA" && state === "Texas";
  $("$city").toggle(show);
  $("$city").prev().toggle(show); // label
})