Question

我有一个普通的选择菜单和一个属性为<!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>的选择菜单。当用户选择多个选项时，如何存储第二个选择菜单的值？如果用户只选择一个选项，但在选择了2个或更多选项时，它根本不存储任何内容，则代码可以正常工作。我的代码是：

var

Answer 1

<强> Working fiddle

选择多个返回一个数组，并且你不能在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()。

希望这有帮助。

会话存储选择菜单多个

1 个答案: