Is it possible to get item selected after browser reload from dropdown list when it is populated based on another select
<p>Is it possible to get selected an option from select list when it is based on another select list after browser reload. well, i know what i wrote above is little bit confusing. I'm trying to explain as much as i can. I've two dropdown. 
First dropdown list :</p>

<pre><code>      &lt;select id = "select-class" name="class_id"  class="form-control"
             required&gt;
                &lt;option&gt; শ্রেণি নির্বাচন&lt;/option&gt;
            &lt;?php foreach ($all_class as $cls) {?&gt;
            &lt;option value="&lt;?php echo $cls-&gt;class_id ; ?&gt;"&gt;
            &lt;?php echo $cls-&gt;name; ?&gt;&lt;/option&gt;
            &lt;?php }?&gt;
    &lt;/select&gt;
</code></pre>

<p>This select list is pretty much clear. It gives me a list of class names and their value.</p>

<p>Second dropdown List:</p>

<pre><code>      &lt;select id = "select-section" name="section_id" class="form-control"&gt; 
           &lt;option&gt; প্রথমে শ্রেণি নির্বাচন করুন &lt;/option&gt;
      &lt;/select&gt;                     
</code></pre>

<p>This select list is populated after changing the first one by this approach :</p>

<pre><code> &lt;script type="text/javascript"&gt;
  $(function(){
    $("#select-class").change(function () {
    var class_id = $(this).val();
    $.ajax({
        url: "&lt;?php echo site_url();?&gt;frontend/ajax_class/"+ class_id,
        data: {class_id: class_id},
        type: "post",
        success: function(msg){

            if(msg){
                $("#select-section").fadeIn();


                $("#select-section").html("&lt;option&gt;select a section&lt;/option&gt;"+msg);
            }
            else
            {
                $("#select-section").fadeOut();

            }
        }

        });
    });
</code></pre>

<p>and when the 2nd dropdown list is changed it loads all the related things like this pic. 
            <a href="https://i.stack.imgur.com/P9gXm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P9gXm.png" alt="enter image description here"></a><br>
by this approach :          </p>

<pre><code>        $(function(){



            $("#opt_subjcts").hide();   

            $("#select-section").change(function () {

                    var class_id = $('select[name=class_id]').val();

                var section_id = $(this).val();

                var result1;
                var result2;
                $.when(
                    $.ajax({ 
                        url: "&lt;?php echo site_url();?&gt;frontend/ajax_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result1 = returnhtml;                  
                        }           
                    }), 
                    $.ajax({ 
                        url: "&lt;?php echo site_url();?&gt;frontend/ajax_opt_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result2 = returnhtml;                  
                        }           
                    })

                ).done(function() {
                    $("#opt_subjcts").hide();
                    if(class_id &gt;= 6){
                    $("#opt_subjcts").show();
                    }
                    $("#subjct").html(result1);
                    $("#rec_sub").html(result2);
                    $("#opt_sub").html(result2);
                });


            });
        });

        &lt;/script&gt;
</code></pre>

<p>Pls notice that i've to select both of dropdown list one after another to get my those stuff. Now i want to get those thing when the browser is loaded. I mean i will provide class_id and section_id from the backend and those will be appeared based the on class_id and section_id the as i will provide . Any Idea pls. </p>