홈>2020-02-01 00:44

javascript - 선택 메뉴 다중의 세션 저장

정상적인 선택 메뉴와 속성 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>

답변 # 1

일하는 바이올린.

복수를 선택하면 배열이 반환되고 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() 대신 귀하의 경우.

이것이 도움이되기를 바랍니다.

Python2.net

javascript - 선택 메뉴 다중의 세션 저장

관련 자료