>

정상적인 선택 메뉴와 속성 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() 대신  귀하의 경우.

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

관련 자료

  • 이전 opengl - 액티브 셰이더 프로그램을 VAO에 저장할 수 있습니까? 그렇다면 어떻게해야합니까?
  • 다음 .net - 다른 C # 애플리케이션에서 C # 애플리케이션의 메소드 호출