select 个菜单的会话存储多个

Question

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

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

Answer 1

Working fiddle.

Select 多个 return 一个数组，你不能在 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()。

希望对您有所帮助。

select 个菜单的会话存储多个

Session storage of select menu multiple

javascript

jquery

sessionstorage