Question 11367 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Show Hide label based on select drop down values – Jquery

I want to Hide and Show the "City" label.
Show only if I choose specific "State" if not hide it again.

  • Country=USA> State=Texas> Show the City label.
  • Country=USA> State=New York> Hide the City 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>

Action.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>';
 }
}
?>
Tags:

2

Answers


  1. 0

    try to add a condition inside the success callback function of the state dependent ajax request

    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();  
    }
}
    Login or Signup to reply.
  2. 0

    It would be easier if the label was wrapping the select or the label and select was inside a div but here you are

    You could just test the state since I expect you do not have other countries with a state called Texas

    This goes anywhere

    $("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
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search