title: I am using Ajax to link two select tags
body: <p>I am using Ajax to link two select tags where one is state and other is cities of the selected state. Everything is working fine. The problem is that when I select a state I get cities of that particular state but when I change the state again, I don't get the cities for the new state for that I have to refresh the page. Kindly help. !! 
  Thanks !</p>
  
  <pre><code>//**HTML**
  
          &lt;select class="select_state" onchange="getCity();"&gt;
           &lt;option value=""&gt;Select State&lt;/option&gt;
             &lt;?php $stateSql = "SELECT * FROM state" ;
                   $stateResult = $conn-&gt;query($stateSql);
                   while($sRow = $stateResult-&gt;fetch_assoc()){
                   echo "&lt;option value='".$sRow['name']."'"."&gt;".$sRow['name'];"  &lt;/option&gt;";
                   }?&gt;&lt;/select&gt;
          function getCity(val) {
            var val = $('.select_state').val();
            //alert(val);
            $.ajax({
            type: "POST",
            url: "get_city.php",
            data:'city_name='+val,
            success: function(data){
              $("#cities").append(data);
            }
            });
  </code></pre>
  
  <p>get_city.php:</p>
  
  <pre><code>    &lt;?php
      include 'dbConfig.php';
  
       $a=$_POST['city_name'];
       if(!empty($_POST["city_name"])) {
          $citySql ="SELECT * FROM cities WHERE city_state LIKE '$a'";
          $cityResult = $conn-&gt;query($citySql);
                          while($cRow = $cityResult-&gt;fetch_assoc()) 
                          {
                            //echo $cRow['city_name'];
                            echo "&lt;option value='".$cRow['city_name']."&gt;".$cRow['city_name'];"&lt;/option&gt;";
                          }
       }
      ?&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/7lcPu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7lcPu.png" alt="Attached copy of the code"></a></p>