複数選択メニューのセッション記憶

私は通常の選択メニューと属性multiple=yesの選択メニューを持っています。ユーザーが複数のオプションを選択したときに、このセカンドセレクトメニューの値を保存するにはどうすればよいですか？ユーザーが1つのオプションのみを選択した場合はコードが機能しますが、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>

出典

2017-05-29 xcx

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

注：場合によっては.html()の代わりに.text()を使用することをお勧めします。

これが役に立ちます。

出典

2017-05-29 18:31:13

複数選択メニューのセッション記憶

答えて

関連する問題