Как остановить обновление параметра поля выбора после нажатия кнопки ОК - PullRequest
Новая
       95

Как остановить обновление параметра поля выбора после нажатия кнопки ОК

0 голосов
/ 17 июня 2020

Я создал страницу пользовательского интерфейса в Servicen, вот мой простой HTML фрагмент, который создает поле выбора и кнопку ОК

Теперь я выбрал поле выбора как Man go и набрал ОК, как только я нажимаю ОК, он устанавливает значение, но когда я обновляю sh браузер, он возвращается к предыдущему виду. как сохранить тот же параметр, который выбирает пользователь, пока пользователь не изменит его 

function validation(){
	var value=document.getElementById("selectedValue").value;
	
	if(value=='disabled selected')
		{
			alert("Please select any value before submitting");
		}
	else if(value=="1"){
				alert("hello this is mango");
	}
	
}
<div class="container">
			<div class="row">
				
				<div class="form-group" style="margin-top:12px;">
					
					<select class="form-control" name="selectedValue" id="selectedValue" style="width:150px;">
						<option value="disabled selected">Choose your option</option>
						<option value="1" >Mango</option>
						<option value="2">Orange</option> 
						<option value="3">Grapes</option> 
						
					</select>
				<!--<h4 id="number_of_updates" style="display:none"><span class="label label-danger"></span></h4> -->

				</div>
					<button type="button" class="btn btn-primary" onclick="validation()"  style="padding: 0px 8px;">Ok</button>
				
			</div>
		</div>

Он работает должным образом, когда я обновляю sh браузер, он будет установлен на «Выберите ваш вариант». Может ли кто-нибудь помочь мне, как сохранить выбранное значение до его изменения

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Для достижения желаемого результата я бы использовал localStorage . Я бы установил элемент localStorage внутри вашей функции validation(): 

function validation(){
    var value=document.getElementById("selectedValue").value;
    localStorage.setItem('MyValue', value);
    if(value=='disabled selected')
        {
            alert("Please select any value before submitting");
        }
    else if(value=="1"){
                alert("hello this is mango");
    }

}

Обратите внимание, что я устанавливаю его на выбранное значение из selectList. Затем нам нужно получить это сохраненное значение при загрузке страницы (на случай, если кто-то обновит страницу): 

window.onload = function (){ //function that is called when your page 
var selectList = document.getElementById('selectedValue');
  var stored = localStorage.getItem('MyValue');
  console.log(stored);
  if(stored && selectList){
    selectList.value = stored //setting saved value to as selected in selectList
  }
}

РЕДАКТИРОВАТЬ: Хотя localStorage поддерживается большинством браузеров, рекомендуется проверить, доступен ли он. Нравится if (typeof localStorage !== 'undefined') ...

0 голосов
/ 17 июня 2020

Есть несколько способов сохранить состояние в refre sh. localStorage - очевидный выбор, но, возможно, более простым решением для вашего случая может быть кодирование состояния в URL-адресе, подобном этому (в основном, так же, как веб-приложения сохраняют часть своего состояния).

Вставьте этот код в конец внутри validation() функция: 

 history.pushState(null, '', '?val=' + value);

Вставьте этот код после этой функции: 

window.onload = function() {
    var params = new URLSearchParams(location.search);
    var value = params.get('val') || 'disabled selected';
    var select = document.getElementById('selectedValue');
    if (select) select.value = value;
}

Вот и все. Примечания: URLSearchParams не работает с IE, вместо этого нетрудно разобрать запрос вручную.

...