ajax加载后，jQuery / html下拉框值保持不变

Question

目前，我有一个层次结构样式（3个级别）下拉框系统，可以浏览一些网页。第二级有3种不同的选项，数字输入，数字输出和模拟输入。第三级，上面列出的所有三个选项有两个选项，Show Displayed Only，Show All。我现在的问题是每次按＆＃34; Show Displayed Only＆＃34;在这3个选项中的任何一个中，它每次都显示相同的网页，我将如何制作它以便正确版本的＆＃34;仅显示显示＆＃34;显示？

第二个问题是，无论何时加载新页面，下拉列表的层次结构都默认为每个框中的第一个选项，我将如何制作它以使框的层次结构保持在我将它们放在页面上的值改变？

这是我目前用于阅读下拉框并显示正确页面的代码：

$("#bottom").on("change", function(event){


                var selection = $( "#bottom option:selected" ).text();

                 console.log(selection);

                 switch (selection) {
                     case "Basic Info":
                        menuPageLoad("#/ajax/settings/device_settings/device_details/basic_info.html");
                        break;
                    case "Site Details":
                        menuPageLoad("#/ajax/settings/device_settings/device_details/site_details.html");
                        break;
                    case "Show Displayed Only":
                         menuPageLoad("#/ajax/settings/device_settings/digital_inputs/show_displayed_only.1.html");
                         break; 
                    case "Show All":
                         menuPageLoad("#/ajax/settings/device_settings/digital_inputs/show_all.html");
                         break; 

                 }

            });

我的等级：

<div class="panel-body">
                <div class="form-group">
                            <label class="col-md-4 control-label">Settings:</label>
                            <div class="col-md-8">
                    <select id="top" class="form-control">
                        <option value="Select">Select</option>
                        <option value="Settings">Device Settings</option>
                        <option value="Groups">Device Groups</option>
                    </select>
                    </div>
                </div>

                    <br /><br />


                    <div class="form-group">
                            <label class="col-md-4 control-label">Section:</label>
                            <div class="col-md-8">
                        <select id="middle" class="form-control">
                        <option value="Select">Select</option>
                        <option value="Settings--Details">Device Details</option>
                        <option value="Settings--Notification">Notification List</option>
                        <option value="Settings--Digital">Digital Inputs</option>
                        <option value="Settings--Analog">Analog Inputs</option>
                        <option value="Settings--DigiO">Digital Outputs</option>
                        <option value="Settings--Geofencing">Geofencing</option>
                        <option value="Settings--Application">Application Specific</option>
                        <option value="Groups--GroupDet">Group Details</option>
                        <option value="Groups--GroupDev">Group Devices</option>
                    </select>
                    </div>
                    </div>


                    <br /><br />


                    <div class="form-group">
                            <label class="col-md-4 control-label">Device Details:</label>
                            <div class="col-md-8">
                        <select id="bottom" class="form-control">
                        <option value="Settings--Select">Select</option>
                        <option value="Settings--Details--BasicInfo">Basic Info</option>
                        <option value="Settings--Details--SiteDetails">Site Details</option>
                        <option value="Settings--Details--DistrInfo">Distributor Information</option>
                        <option value="Settings--Details--CustInfo">Customer Information</option>
                        <option value="Settings--Notification--Add">Add or Edit</option>
                        <option value="Settings--Notification--Import">Import Notification List</option>
                        <option value="Settings--Digital--Displayed">Show Displayed Only</option>
                        <option value="Settings--Digital--All">Show All</option>
                        <option value="Settings--Analog--Displayed">Show Displayed Only</option>
                        <option value="Settings--Analog--All">Show All</option>
                        <option value="Settings--DigiO--Displayed">Show Displayed Only</option>
                        <option value="Settings--DigiO--All">Show All</option>
                    </select>
                    </div>
                    </div>
                </div>

MenuPageLoad（）：

var default_content2 = '<div class="p-t-40 p-b-40 text-center f-s-20 content"><i class="fa fa-warning fa-lg text-muted m-r-5"></i> <span class="f-w-600 text-inverse">Error 404! Page not found.</span></div>';

            var menuPageLoad = function(hash) {
                //Pace.restart();
                var targetUrl = hash.replace('#','');
                $('.jvectormap-label, .jvector-label, .AutoFill_border ,#gritter-notice-wrapper, .ui-autocomplete, .colorpicker, .FixedHeader_Header, .FixedHeader_Cloned .lightboxOverlay, .lightbox').remove();
                $.ajax({
                    type: 'POST',
                    url: targetUrl, //with the page number as a parameter
                    dataType: 'html',   //expect html to be returned
                    success: function(data) {
                        $('#ajax-content').html(data);
                        $('html, body').animate({
                            scrollTop: $("body").offset().top
                        }, 250);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $('#ajax-content').html(default_content2);
                    }
                });
            };