title: How to retain value of drop down options after form is submitted
body: <p>I have the three drop down option pulling data from database, the state and city selection.The <code>city select option</code> using ajax to get the value from database based on <code>select in state</code> value, everything works fine on getting value.The <code>state value</code> are using <code>php function to populate</code> .</p>
  <p>The problem is the second select option, which is <code>city option</code> not retaining the value in the select options bar after the has form been submitted. (basically it resets) The second problem after submitting the form the select <code>options of city</code> does not populate, you need to change the other <code>option of state</code> before you can change it on city list.</p>
  <p>Been going through many topics and searching but cant find a solution. i think that the values should remain after i reload the page because I used localstorage for categories and state and had no issues even the <code>city option</code> have its values inside localstorage only that it does not show inside select option after page has been reloaded.</p>
  <pre><code>function get_state(){
    global $db;
    $output = '';
    $results = $db-&gt;query(&quot;SELECT * FROM region&quot;);
    foreach($results as $state) {
      $output .='&lt;option value=&quot;'.$state[&quot;pk_i_id&quot;].'&quot;&gt;'.$state[&quot;s_name&quot;].'&lt;/option&gt;';
    }
    return $output;
  }
  
   &lt;form method=&quot;GET&quot;&gt;
   &lt;div class=&quot;container&quot;&gt;
     &lt;div class=&quot;form-group&quot;&gt;
  
        &lt;select name=&quot;categories&quot; id=&quot;categories&quot; class=&quot;btn-sm saveIt&quot;&gt;
          &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
          &lt;?=get_categories();?&gt;
        &lt;/select&gt;
  
        &lt;select name=&quot;state&quot; id=&quot;state&quot; class=&quot;btn-sm saveIt&quot;&gt;
          &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
  
          &lt;?=get_state();?&gt;
        &lt;/select&gt;
  
        &lt;select name=&quot;city&quot; id=&quot;city&quot; class=&quot;btn-sm saveIt&quot;&gt;
          &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
        &lt;/select&gt;
  
  
        &lt;button type=&quot;submit&quot; id=&quot;go&quot;&gt;Go&lt;/button&gt;
  
  
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>ajax script</p>
  <pre><code>$(document).ready(function() {
        function get_city(){
          var stateID = $('#state').val();
          $.ajax({
            url: '/parsers/city_list.php',
            type: 'POST',
            data: {stateID : stateID},
            success: function(data){
              $('#city').html(data);
            },
            error: function() {
              alert(&quot;Something went wrong with the city list.&quot;)
            },
          });
        }
        $('select[name=&quot;state&quot;]').change(get_city);
      });
  </code></pre>
  <p>And the city_list.php for ajax call</p>
  <pre><code>&lt;?php
    require_once $_SERVER['DOCUMENT_ROOT'].'/core/init.php';
    $stateID = (int)$_POST['stateID'];
  
    $cityQuery = $db-&gt;query(&quot;SELECT * FROM city WHERE fk_i_region_id = '$stateID' &quot;);
    ob_start();
    ?&gt;
    &lt;option value=&quot;&quot;&gt;Select City&lt;/option&gt;
    &lt;?php while($city = mysqli_fetch_assoc($cityQuery)): ?&gt;
      &lt;option value=&quot;&lt;?=$city['pk_i_id'];?&gt;&quot;&gt;&lt;?=$city['s_name'];?&gt;&lt;/option&gt;
    &lt;?php endwhile; ?&gt;
  
  &lt;?php echo ob_get_clean(); ?&gt;
  </code></pre>
  <p>thank in advance if you need some detail i can provide.Thank you.</p>
  <p><a href="http://www.jqueryscript.net/form/jQuery-Plugin-To-Store-Form-Values-Into-Local-Storage-saveIt.html" rel="nofollow noreferrer">A link to sample code</a>!</p>
  <p>This link to jQuery plugin with localstorage. [jquery plugin][1].</p>
  <p>Display before submitting form was fine only after submitting the form <code>city option</code> displays value instead of <code>name of value</code>.</p>
  <p>Second issues after submitting form it only shows one option, its supposed to show all option, you need to change <code>city options</code> first then all <code>city list</code> will shown.</p>
  <p><a href="https://i.stack.imgur.com/RGAWT.png" rel="nofollow noreferrer">Problem two image link</a></p>