Code Bug Fix: by selecting the values in one drop down list based on that selection only values related to that should get in second drop down list

Original Source Link

<td>
  <select name="Country" id="Country">
    <option>select country</option>
    <option>India</option>
    <option>USA</option>
    <option>AUSTRALIA</option>
  </select>
</td>
<td>
  <select name="States" id="States" >
    <option>Select states</option>
    <option>Karnataka</option>
    <option>Maharashtra</option>
    <option>Uttar Pradesh</option>
    <option>Tamil Nadu</option>//states of India
    <option>California</option>
    <option>New Jersey</option>
    <option>New York</option>//States of USA
    <option>queens land</option>
    <option>Victoria</option>//States of AUSTRALIA
  </select>
</td>

**this is the link were i wrote my source code. There are different countries list in one drop down option and states list in other drop down option. If user clicks on India in the first drop down list the states related to India should get displayed in second drop down list same with other countries also **
**Please help me to solve this **

With help of jQuery and data attributes you can achieve this functionality

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#Country").change(function() {
          var selectedCountry = $(this).children("option:selected").val();

          // Hide all states in States dropdown
          $("#States option").hide();

          // Show all states of selected country
          $("#States option[data-country='" + selectedCountry + "']").show();

          // Show first option 'Select states'
          $("#States option[data-country='Select']").show();

          // Reset States drop down
          $("#States").val('Select states');

        });
      });

    </script>
  </head>

  <body>
    <table id="form">
      <tr>
        <td>
          <select name="Country" id="Country">
            <option>select country</option>
            <option>India</option>
            <option>USA</option>
            <option>AUSTRALIA</option>
          </select>
        </td>
        <td>
          <select name="States" id="States">
            <option data-country="Select">Select states</option>
            <option data-country="India">Karnataka</option>
            <option data-country="India">Maharashtra</option>
            <option data-country="India">Uttar Pradesh</option>
            <option data-country="India">Tamil Nadu</option>

            <option data-country="USA">California</option>
            <option data-country="USA">New Jersey</option>
            <option data-country="USA">New York</option>

            <option data-country="AUSTRALIA">queens land</option>
            <option data-country="AUSTRALIA">Victoria</option>
          </select>
        </td>
      </tr>
    </table>
  </body>

</html>
Tagged :

Leave a Reply

Your email address will not be published. Required fields are marked *