CODEWITHSUNDEEP
htmljquerydjango
Asaimani Asaithambi
Asaimani Asaithambi

Reputation: 1

Overlap in drop down button in HTML code using JQUERY

Drop Down1: Work County1: INDIA Work State1:

Drop Down2: Work County2: INDIA Work State2: CHN

I have coded drop down logic. Scenario1: selected Country1 India and state as chennai. Scenario2: Selected country2 USA and state is TX. Scenario3: Selected country 2 as India and state is Chennai.But it impacted the drop down 1 by making the state as blank.

My doubt is drop down1 and drop down 2 should be independent of each other but scenario3 stated above occurs. My code snippet is below.

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
        $(document).ready(function()
        {
          var $select1=$('#select1'),
              $select2=$('#select2')
              $options=$select2.find('option');
              $select1.on('change',function()
              {
                $select2.html($options.filter('[value="'+this.value+'"]'));
              }).trigger('change');
        }   
        );
      
</script>

<script>
        $(document).ready(function()
        {
          var $select3=$('#select3'),
              $select4=$('#select4')
              $options=$select4.find('option');
              $select3.on('change',function()
              {
                $select4.html($options.filter('[value="'+this.value+'"]'));
              }).trigger('change');
        }   
        );
      
</script>


<title>Page Title</title>
</head>
<body>
<tr>
          <td><label for="appt">Work County1:</label></td>
          <td><select id="select1">
              <option selected disabled="true" value="">------</option>
              <option value="1">INDIA </option>
              <option value="2">USA </option>
              </select><br></td>
          <td><label for="appt">Work State1:</label></td>
          <td><select id="select2">
              <option selected disabled="true" value="">------</option>
              <option value=1>CHN</option>
              <option value=2>TX</option>
              </select><br></td>
          
        </tr>
        <br><br><br><br>
        <tr>
          <td><label for="appt">Work County2:</label></td>
          <td><select id="select3">
              <option selected disabled="true" value="">------</option>
              <option value="1">INDIA </option>
              <option value="2">USA </option>
              </select><br></td>
          <td><label for="appt">Work State2:</label></td>
          <td><select id="select4">
              <option selected disabled="true" value="">------</option>
              <option value=1>CHN</option>
              <option value=2>TX</option>
              </select><br></td>
          
        </tr>
</body>
</html>

Upvotes: 0

Views: 38

Answers (1)

Asaimani Asaithambi
Asaimani Asaithambi

Reputation: 1

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
        $(document).ready(function()
        {
          var $select1=$('#select1'),
              $select2=$('#select2'),
              $options=$select2.find('option');
              $select1.on('change',function()
              {
                $select2.html($options.filter('[value="'+this.value+'"]'));
              }).trigger('change');
        }   
        );
      
</script>

<script>
        $(document).ready(function()
        {
          var $select3=$('#select3'),
              $select4=$('#select4'),
              $options=$select4.find('option');
              $select3.on('change',function()
              {
                $select4.html($options.filter('[value="'+this.value+'"]'));
              }).trigger('change');
        }   
        );
      
</script>


<title>Page Title</title>
</head>
<body>
<tr>
          <td><label for="appt">Work County1:</label></td>
          <td><select id="select1">
              <option selected disabled="true" value="">------</option>
              <option value="1">INDIA </option>
              <option value="2">USA </option>
              </select><br></td>
          <td><label for="appt">Work State1:</label></td>
          <td><select id="select2">
              <option selected disabled="true" value="">------</option>
              <option value=1>CHN</option>
              <option value=2>TX</option>
              </select><br></td>
          
        </tr>
        <br><br><br><br>
        <tr>
          <td><label for="appt">Work County2:</label></td>
          <td><select id="select3">
              <option selected disabled="true" value="">------</option>
              <option value="1">INDIA </option>
              <option value="2">USA </option>
              </select><br></td>
          <td><label for="appt">Work State2:</label></td>
          <td><select id="select4">
              <option selected disabled="true" value="">------</option>
              <option value=1>CHN</option>
              <option value=2>TX</option>
              </select><br></td>
          
        </tr>
</body>
</html>

Upvotes: 0

Related Questions