想要顯示錶格提交後選定的div也

Question

波紋顯示代碼做這些事 當我從選擇列表中選擇Scholership程序class =「mystaff_hide mystaff_opt1」的div元素將顯示 然後我選擇Family Income now div將顯示class =「mystaff_hide mystaff_opt2」。現在都在我的窗戶上了。 直到這個代碼工作正常

我要的是遞交的表格後，我想他們兩個都必須有我的窗戶

<div class="row"> 
     <div class="col-md-6 col-sm-6 pull-left"> 
     <div class="form-group">        
      <legend>Options to Search</legend> 
      <select class="form-control firstdropdown" name="sel_options" id="mystuff"> 
      <option>Select Options</option> 
      <option value="opt1">Scholership Programs</option> 
      <option value="opt2">Family Income</option> 

      </select> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt1"> 
     <div class="form-group">       
     <label for="LS_name">Scholarship</label> 
      <select class="form-control" name="LS_name[]" id="LS_name" multiple="multiple"> 
     <option value="opt1">Scholership1</option> 
      <option value="opt2">Scholership2</option> 
     </select> 
    </div>  
    </div> 
    <div class="col-md-6 col-sm-6 mystaff_hide mystaff_opt2"> 
     <div class="form-group">       
     <label for="Family Income">Family Income</label> 

     <select multiple class="form-control" name="FamilyIncome[]" id="FamilyIncome"> 
      <option value="opt1">Family Income1</option> 
      <option value="opt2">Family Income2</option> 
    </select> 
    </div>    
    </div> 

這是我的腳本

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $('.mystaff_hide').addClass('collapse'); 
     $('#mystuff').change(function(){ 
      var selector = '.mystaff_' + $(this).val(); 
      $(selector).collapse('show'); 
     }); 
    }); 
    </script> 

經過很多搜索我得到這個代碼，這是隻顯示最近有關選定的選項的div

 <?php if(isset($_POST['sel_options']) && 
     !empty(isset($_POST['sel_options']))){ 
     ?> 
     <script> 
     var selected_option = "<?php echo $_POST['sel_options']; ?>"; 
     var selector = '.mystaff_' + selected_option; 
      //show only element connected to selected option 
      $(selector).collapse('show'); 
     </script> 
     <?php } ?> 

Answer 1

在localStorage或sessionstorage看看存儲有關網頁的狀態信息和重裝後讀取它們來恢復UI狀態

例子：

localStorage的

// Store 
localStorage.setItem("lastname", "Smith"); 
// Retrieve 
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 

的sessionStorage

if (sessionStorage.clickcount) { 
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; 
} else { 
    sessionStorage.clickcount = 1; 
} 
document.getElementById("result").innerHTML = "You have clicked the button " + 
sessionStorage.clickcount + " time(s) in this session."; 

或者你可能想使用AJAX

AJAX是與服務器交換數據，並更新網頁的部分的藝術 - 無需刷新整個頁面。

當你正在使用jQuery，你可能想看看using Ajax in jquery.

// this is the id of the form 
$("#idForm").submit(function(e) { 

var url = "path/to/your/script.php"; // the script where you handle the form input. 

$.ajax({ 
     type: "POST", 
     url: url, 
     data: $("#idForm").serialize(), // serializes the form's elements. 
     success: function(data) 
     { 
      alert(data); // show response from the php script. 
     } 
    }); 

e.preventDefault(); // avoid to execute the actual submit of the form. 
});