Сохранение положения выбранного option в разных select

343
10 августа 2021, 16:50

Как сохранить выбранное положение option в select с нужным классом. В js и jQ не силён. Буду благодарен за помощь.

UPD: попробую перефразировать вопрос. Если у select c определенным классом выбран, например, option:nth-child(2), то у всех селектов, с этим же классом, нужно выбрать этот же option, даже при перезагрузке страницы. Надеюсь объяснил

Answer 1

Насколько понял, настолько и сделал. Смотреть -> JSFiddle

$('select').on('change', function(){ 
	let selClass = $(this).attr('class'), 
  		optVal = $(this).val(); 
  $('.'+selClass).val(optVal); 
	checkSelect($(this),optVal,selClass); 
}); 
 
function checkSelect(elem,elemValue,elemClass) { 
	let el = JSON.parse(localStorage.getItem('select')); 
  let obj = {class:elemClass,value:elemValue}; 
	if (elemValue != '-1' && el != null) {  
    let id = null; 
    $(el).each(function(key,elem){ 
      if (elem.class == elemClass) { 
      	id = key; 
      } 
    }); 
    if (id!=null) { 
    	el[id] = obj; 
    } else { 
    	el.push(obj); 
    } 
    localStorage.setItem('select', JSON.stringify(el)); 
  } else { 
  	localStorage.setItem('select', JSON.stringify([obj])); 
  } 
} 
 
$(function(){ 
	let elems = JSON.parse(localStorage.getItem('select')); 
  if (elems!=null) { 
    $(elems).each(function(key,elem){ 
  	  $('.'+elem.class).val(elem.value); 
    }); 
  } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select class="s1"> 
  <option value="-1" selected hidden>choose value</option> 
  <option value="s1">s1</option> 
  <option value="s2">s2</option> 
  <option value="s3">s3</option> 
</select> 
<select class="s1"> 
  <option value="-1" selected hidden>choose value</option> 
  <option value="s1">s1</option> 
  <option value="s2">s2</option> 
  <option value="s3">s3</option> 
</select> 
<select class="s2"> 
  <option value="-1" selected hidden>choose value</option> 
  <option value="s1">s1</option> 
  <option value="s2">s2</option> 
  <option value="s3">s3</option> 
</select> 
<select class="s2"> 
  <option value="-1" selected hidden>choose value</option> 
  <option value="s1">s1</option> 
  <option value="s2">s2</option> 
  <option value="s3">s3</option> 
</select> 
<select class="s3"> 
  <option value="-1" selected hidden>choose value</option> 
  <option value="s1">s1</option> 
  <option value="s2">s2</option> 
  <option value="s3">s3</option> 
</select> 
<select class="s3"> 
  <option value="-1" selected hidden>choose value</option> 
  <option value="s1">s1</option> 
  <option value="s2">s2</option> 
  <option value="s3">s3</option> 
</select>

З.Ы. если использовать для хранения localStorage, то надо делать удаление добавленного эл-та, к примеру, во время/после logout'а

Answer 2

Подставьте свои значения:

$(document).ready(function () {
    $('select .your-class').attr('selected', 'selected');
});

Само собой что jq должен быть подключен.

READ ALSO
scrollHeight и clientHeight равны 0 JS

scrollHeight и clientHeight равны 0 JS

Такой странный баг у меня

182
Кэширование внешних API в Angular PWA и окружение

Кэширование внешних API в Angular PWA и окружение

Можно ли при использовании @angular/pwa кэшировать внешние API (домен приложения и API не совпадает)Если да то каким образом должна выглядеть коyфигурация...

205
Ошибка 422 при работе с fetch

Ошибка 422 при работе с fetch

Не понимаю, почему вылетает ошибка 422Вот мой код для запроса:

110
Микроразметка shema.org в MODX Revolution

Микроразметка shema.org в MODX Revolution

Подскажите пожалуйста такой моментЯ добавляю микроразметку, но валидатор требует чтобы у каждой крошки был мета-тег position (<meta itemprop="position"...

107