Как сохранить значение присвоеного style.display='inline' для block1-block7 function Selected(a) { var label = a.value; после перезагрузки?

331

07 ноября 2017, 00:06

Добрый день помогите решить задачу необходимо после перезагрузки страницы сохранить значение function Selected(a) { var label = a.value;

<script>
function Selected(a) {
    var label = a.value;
    if (label==1) {
        document.getElementById("Block1").style.display='inline';
        document.getElementById("Block2").style.display='none';
        document.getElementById("Block3").style.display='none';
        document.getElementById("Block4").style.display='none';
        document.getElementById("Block5").style.display='none';
        document.getElementById("Block6").style.display='none';
        document.getElementById("Block7").style.display='none';
    } else if (label==2) {
        document.getElementById("Block1").style.display='none';
        document.getElementById("Block2").style.display='inline';
        document.getElementById("Block3").style.display='none';
        document.getElementById("Block4").style.display='none';
        document.getElementById("Block5").style.display='none';
        document.getElementById("Block6").style.display='none';
        document.getElementById("Block7").style.display='none';
    } else if (label==3) {
        document.getElementById("Block1").style.display='none';
        document.getElementById("Block2").style.display='none';
        document.getElementById("Block3").style.display='inline';
        document.getElementById("Block4").style.display='none';
        document.getElementById("Block5").style.display='none';
        document.getElementById("Block6").style.display='none';
        document.getElementById("Block7").style.display='none';
    } else if (label==4) {
        document.getElementById("Block1").style.display='none';
        document.getElementById("Block2").style.display='none';
        document.getElementById("Block3").style.display='none';
        document.getElementById("Block4").style.display='inline'
        document.getElementById("Block5").style.display='none';
        document.getElementById("Block6").style.display='none';
        document.getElementById("Block7").style.display='none';
    } else if (label==5) {
        document.getElementById("Block1").style.display='none';
        document.getElementById("Block2").style.display='none';
        document.getElementById("Block3").style.display='none';
        document.getElementById("Block4").style.display='none';
        document.getElementById("Block5").style.display='inline';
        document.getElementById("Block6").style.display='none';
        document.getElementById("Block7").style.display='none';
    }  else if (label==6) {
        document.getElementById("Block1").style.display='none';
        document.getElementById("Block2").style.display='none';
        document.getElementById("Block3").style.display='none';
        document.getElementById("Block4").style.display='none';
        document.getElementById("Block5").style.display='none';
        document.getElementById("Block6").style.display='inline';
        document.getElementById("Block7").style.display='none';
    }  else  {
        document.getElementById("Block1").style.display='none';
        document.getElementById("Block2").style.display='none';
        document.getElementById("Block3").style.display='none';
        document.getElementById("Block4").style.display='none';
        document.getElementById("Block5").style.display='none';
        document.getElementById("Block6").style.display='none';
        document.getElementById("Block7").style.display='inline';
    } 
}
</script>
<select id="actSelect" class="Validate_Required " name="actSelect" aria-
required="true" 
onChange="Selected(this);localStorage.actSelect=this.selectedIndex">
   <option value="" selected="selected"> -- Район не выбран -- </option><?
php echo JText::_( "доставка в" ) . ''; ?>
   <option value="1">Ленинский район</option>
   <option value="2">Железнодорожный район</option>
   <option value="3">Левобережный район</option>
   <option value="4">Советский район</option>
   <option value="5">Центральный район</option>
   <option value="6">Коминтерновский район</option>
</select>

<script>
//восстанавливаем запомненное значение, если есть
if(localStorage.actSelect!==undefined) actSelect.selectedIndex = 
localStorage.actSelect;
</script>
<script>
var Block1 = document.getElementById('Block1');
function Selected(a) {
Block1.style.display = (Block1.style.display == 'inline') ? '' : 'inline';
localStorage.setItem('hide', Block1.style.display); // сохраняем значение в 
ключ hide
}
if(localStorage.getItem('hide') == 'inline') { // если значение ключа hide 
"inline"
document.getElementById('Block1').style.display = 'inline';
}
</script>

<?php echo JText::_('') .  "" .  ("&nbsp")   . ("&nbsp")   . ("&nbsp")   . 
'' . ("&nbsp")    . ("&nbsp")  .  ("&nbsp")   . ("&nbsp")   . '' . ("&nbsp")   
.   ''; ?><tr class="cart_subtotal"> 
<div id='Block1' style='display: none;'>
  89601336484э
</div>
<div id='Block2' style='display: none;'>
    89601336484а
</div>
<div id='Block3' style='display: none;'>
    89601336484е
</div>
 <div id='Block4' style='display: none;'>
    89601336484в
</div>
 <div id='Block5' style='display: none;'>
    89601336484ы
</div>
 <div id='Block6' style='display: none;'>
    89601336484с
</div>
 <div id='Block7' style='display: inline;'>
    +7 (473)2хх-хх-хх
</div>
        </div>

Answer 1

Добавьте jquery и класс "block" к вашим блокам для удобства. Измените onChange.

    function Selected(label) {
        $('.block').hide();
        $('#Block' + label).show();
        localStorage.setItem('current_block', label); 
    }
$( document ).ready(function(){
    var current_block = localStorage.getItem('current_block');
    if(current_block){
        Selected(current_block);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="actSelect" class="Validate_Required " name="actSelect" aria-
required="true" 
onChange="Selected(this.value);">
   <option value="" selected="selected"> -- Район не выбран -- </option><?
php echo JText::_( "доставка в" ) . ''; ?>
   <option value="1">Ленинский район</option>
   <option value="2">Железнодорожный район</option>
   <option value="3">Левобережный район</option>
   <option value="4">Советский район</option>
   <option value="5">Центральный район</option>
   <option value="6">Коминтерновский район</option>
</select>
<div> 
<div id='Block1' class="block" style='display: none;'>
  89601336484э
</div>
<div id='Block2' class="block" style='display: none;'>
    89601336484а
</div>
<div id='Block3' class="block" style='display: none;'>
    89601336484е
</div>
 <div id='Block4' class="block" style='display: none;'>
    89601336484в
</div>
 <div id='Block5' class="block" style='display: none;'>
    89601336484ы
</div>
 <div id='Block6' class="block" style='display: none;'>
    89601336484с
</div>
 <div id='Block7' class="block" style='display: none;'>
    +7 (473)2хх-хх-хх
</div>
</div>

Answer 2

Не помогло без

localStorage.actSelect=this.selectedIndex

Не сохраняет значение в option value

Функция

function Selected(label) {
$('.block').hide();
$('#Block' + label).show();
localStorage.setItem('current_block', label); 
} работает но из  localStorage не чего 
$( document ).ready(function(){
var current_block = localStorage.getItem('current_block');
if(current_block){
Selected(current_block);
}

Не вытаскивает я правильно понял принцип?