Javascript 当基于另一个选择填充项目时，是否可以在浏览器重新加载后从下拉列表中选择该项目

重新加载浏览器后，如果选项基于另一个选择列表，是否可以从选择列表中选择该选项。我知道我上面写的有点让人困惑。我正在尽可能多地解释。我有两个下拉列表。 第一个下拉列表：

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

        $(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: "<?php echo site_url();?>frontend/ajax_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result1 = returnhtml;                  
                        }           
                    }), 
                    $.ajax({ 
                        url: "<?php echo site_url();?>frontend/ajax_opt_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result2 = returnhtml;                  
                        }           
                    })

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


            });
        });

        </script>

这个选择列表非常清楚。它给了我一个类名及其值的列表

        $(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: "<?php echo site_url();?>frontend/ajax_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result1 = returnhtml;                  
                        }           
                    }), 
                    $.ajax({ 
                        url: "<?php echo site_url();?>frontend/ajax_opt_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result2 = returnhtml;                  
                        }           
                    })

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


            });
        });

        </script>

第二个下拉列表：

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

        $(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: "<?php echo site_url();?>frontend/ajax_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result1 = returnhtml;                  
                        }           
                    }), 
                    $.ajax({ 
                        url: "<?php echo site_url();?>frontend/ajax_opt_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result2 = returnhtml;                  
                        }           
                    })

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


            });
        });

        </script>

通过以下方法更改第一个选择列表后，将填充此选择列表：

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

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


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

            }
        }

        });
    });

        $(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: "<?php echo site_url();?>frontend/ajax_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result1 = returnhtml;                  
                        }           
                    }), 
                    $.ajax({ 
                        url: "<?php echo site_url();?>frontend/ajax_opt_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result2 = returnhtml;                  
                        }           
                    })

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


            });
        });

        </script>

当第二个下拉列表被更改时，它会加载所有相关的东西，比如这张图片。 通过这种方法：

        $(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: "<?php echo site_url();?>frontend/ajax_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result1 = returnhtml;                  
                        }           
                    }), 
                    $.ajax({ 
                        url: "<?php echo site_url();?>frontend/ajax_opt_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result2 = returnhtml;                  
                        }           
                    })

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


            });
        });

        </script>

请注意，我必须一个接一个地选择这两个下拉列表才能得到这些东西。现在我想在浏览器加载时得到这些东西。我的意思是，我将从后端提供class_id和section_id，这些将根据我将提供的class_id和section_id显示。有什么想法吗

        $(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: "<?php echo site_url();?>frontend/ajax_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result1 = returnhtml;                  
                        }           
                    }), 
                    $.ajax({ 
                        url: "<?php echo site_url();?>frontend/ajax_opt_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result2 = returnhtml;                  
                        }           
                    })

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


            });
        });

        </script>

使用触发器强制启动更改事件

        $(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: "<?php echo site_url();?>frontend/ajax_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result1 = returnhtml;                  
                        }           
                    }), 
                    $.ajax({ 
                        url: "<?php echo site_url();?>frontend/ajax_opt_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result2 = returnhtml;                  
                        }           
                    })

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


            });
        });

        </script>

试试这个：

        $(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: "<?php echo site_url();?>frontend/ajax_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result1 = returnhtml;                  
                        }           
                    }), 
                    $.ajax({ 
                        url: "<?php echo site_url();?>frontend/ajax_opt_subjects/"+ class_id + "/" + section_id ,
                        type: "post",      
                        success: function(returnhtml){     
                                result2 = returnhtml;                  
                        }           
                    })

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


            });
        });

        </script>

$function{ $select-class.changefunction{ var class_id=$this.val； $.ajax{ url:frontend/ajax_class/+class_id， 数据：{ 类别id：类别id }, 类型:post,， 成功：functionmsg{ 如果味精{ $select-section.fadeIn； $select-section.htmlselect a section+msg； }否则{ $select-section.fadeOut； } } }.change；//或.trigger'change'

---

}；为了在页面重新加载时保留值，可以使用Localstorage-