Question

Bellow显示的代码完成了这些事情当我从选择列表中选择Scholership程序时，div元素的类为＆＃34; mystaff_hide mystaff_opt1＆＃34;将会显示然后我选择Family Income now div with class =＆＃34; mystaff_hide mystaff_opt2＆＃34;将会显示。现在两个都在我的窗口。到目前为止，代码工作正常

我想要的是在提交表格之后我希望他们两个都必须在我的窗户上

    <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>

经过大量搜索，我得到的代码只显示了最近相关的选项＆＃39; s 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");

会话存储

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.
});

想要在表单提交后显示选定的div

1 个答案: