[英]JQuery - Show Hide DIVS based on 2 different select drop down values
[英]Show Hide label based on select drop down values
我想隱藏和顯示“城市”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>';
}
}
?>
嘗試在 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();
}
}
如果 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
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.