Хранение сеансов меню выбора нескольких

Question

Хранение сеансов меню выбора нескольких

У меня есть нормальное меню выбора и меню выбора с атрибутом multiple=yes, Как я могу сохранить значения этого второго меню выбора, когда пользователь выбирает более одной опции? Код работает, если пользователь выбирает только одну опцию, но вообще ничего не сохраняет, когда выбраны 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>

1

javascript jquery sessionstorage

Источник

user6202757 29 май '17 в 18:06

1 ответ

Решение

Другие вопросы по тегам javascript jquery sessionstorage

user4281779 29 май '17 в 18:31 2017-05-29 18:31 · Accepted Answer · 2017-05-29 18:31

Рабочая скрипка.

Выберите множественный возврат массива, и вы не можете сохранить массив в 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() в твоем случае.

Надеюсь это поможет.