Javascript 选择多个菜单的会话存储_Javascript_Jquery_Sessionstorage

Javascript 选择多个菜单的会话存储

javascript jquery

Javascript 选择多个菜单的会话存储,javascript,jquery,sessionstorage,Javascript,Jquery,Sessionstorage,我有一个普通的选择菜单和一个属性为multiple=yes的选择菜单。当用户选择多个选项时，如何存储第二个选择菜单的值？如果用户只选择了一个选项，但当选择了两个或更多选项时，代码根本不存储任何内容，那么代码就可以工作。我的代码是： <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script

我有一个普通的选择菜单和一个属性为multiple=yes的选择菜单。当用户选择多个选项时，如何存储第二个选择菜单的值？如果用户只选择了一个选项，但当选择了两个或更多选项时，代码根本不存储任何内容，那么代码就可以工作。我的代码是：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://github.com/yckart/jquery.storage.js"></script>
<meta charset="utf-8">
<title>test</title>

 <script type="text/javascript">    
 $(function () {                      
$("#btn").click(function () {

     var item1 =  $("#sel option:selected").text();
     var item2 =  $("#sel2 option:selected").text();

      sessionStorage.setItem("sele", item1); 
      sessionStorage.setItem("sele2", item2); 
      });    

      var ty = sessionStorage.getItem("sele");
      var ty2 = sessionStorage.getItem("sele2");

      if(ty){
        //Set the value of select from sessionStorage
            $('#sel option').filter(function () { return $(this).html() == ty; }).prop('selected', true); 
            $('#sel2 option').filter(function () { return $(this).html() == ty2; }).prop('selected', true);                              
       }   
    });              

    </script>   

  <script type="text/javascript">    
  $(function () {

$("#btn2").click(function () {

      sessionStorage.removeItem("sele"); 
      sessionStorage.removeItem("sele2"); 
      });      
    });              

     </script>   
 </head>
 <body>
 <section>
            <article>
                 <select id="sel">
                  <option value="1">Volvo</option>
                  <option value="2">Saab</option>
                  <option value="3">Mercedes</option>
                   <option value="4">Audi</option>
                  </select>  
                               <br />


           </article>  
           </section>

 <section>
            <article>
                 <select id="sel2" multiple="yes">
                  <option value="1">Volvo</option>
                  <option value="2">Saab</option>
                  <option value="3">Mercedes</option>
                   <option value="4">Audi</option>
                  </select>  
                               <br />
                      <input type="button" value="Store"  id="btn" /><br>    <input type="button" value="Clear"  id="btn2" />

           </article>  
           </section>
 </body>
 </html>

选择multiple return a array，则无法将数组存储在sessionStorage中，但可以将数组存储为通过分隔符连接的字符串，然后在读取时使用此分隔符拆分得到的字符串，如下所示：

$(function () {   
  var ty = sessionStorage.getItem("sele");
  var ty2 = sessionStorage.getItem("sele2");

  if(ty){
    //Set the value of select from sessionStorage
    $('#sel option').filter(function () {
      return $(this).text() == ty; 
    }).prop('selected', true); 

    $('#sel2 option').filter(function () {
      return $.inArray( $(this).text(), ty2.split('-'))>-1;
    }).prop('selected', true);                              
  } 

  $("#btn").click(function () {
    var item1 = $("#sel option:selected").text();
    var item2 = [];
    $("#sel2 option:selected").each(function(){
      item2.push( $(this).text() );
    });
    sessionStorage.setItem("sele", item1); 
    sessionStorage.setItem("sele2", item2.join('-'));  
  });
  $("#btn2").click(function () {
    sessionStorage.removeItem("sele"); 
    sessionStorage.removeItem("sele2");   
  });    
});

注意：在您的案例中最好使用.text而不是.html

希望这有帮助。

$(function () {   
  var ty = sessionStorage.getItem("sele");
  var ty2 = sessionStorage.getItem("sele2");

  if(ty){
    //Set the value of select from sessionStorage
    $('#sel option').filter(function () {
      return $(this).text() == ty; 
    }).prop('selected', true); 

    $('#sel2 option').filter(function () {
      return $.inArray( $(this).text(), ty2.split('-'))>-1;
    }).prop('selected', true);                              
  } 

  $("#btn").click(function () {
    var item1 = $("#sel option:selected").text();
    var item2 = [];
    $("#sel2 option:selected").each(function(){
      item2.push( $(this).text() );
    });
    sessionStorage.setItem("sele", item1); 
    sessionStorage.setItem("sele2", item2.join('-'));  
  });
  $("#btn2").click(function () {
    sessionStorage.removeItem("sele"); 
    sessionStorage.removeItem("sele2");   
  });    
});

注意：在您的案例中最好使用.text而不是.html

希望这有帮助