[Javascript] select 태그 기본 선택값 설정하기, 선택값 비활성화 하기

HTML

  <select class="language" name="language">
    <option value="KR">한국어</option>
    <option value="JP">일본어</option>
    <option value="EN">영어</option>
    <option value="CN">중국어</option>
  </select>

HTML에서 select 태그를 사용해서 선택창을 만든다.

 

HTML - select 태그의 옵션

<select class="language" name="language" disabled> </select>

select disabled = 선택창을 사용하지 못하게 한다.

 

HTML - option 태그의 옵션들

<option value="KR" selected>한국어</option>

<option value="KR" disabled>한국어</option>

<option value="KR" hidden>한국어</option>

option selected = 해당 옵션이 선택되어 있다고 전달한다.

option disabled = 해당 옵션을 사용하지 못하게 한다.

option hidden = 해당 옵션이 보이지 않게 한다.

 

JAVASCRIPT에서 선택값을 LocalStorage에 저장하는 법

const select = document.querySelector("select");

select.addEventListener("change", (event) => {
	const selectValue = select.value;
  localStorage.setItem("LANGUAGE", selectValue);
});

select 태그를 queryselector로 가져온 다음 addeventListener로 해당 태그가 변경될 때마다 이벤트를 실행해준다.

 

slect.value는 select 태그에서 선택된 option을 나타낸다.

 

localstorage.setItem으로 localstorage에 키값:Language, 밸류:현재 선택된 option 값을 넣어준다.

 

JAVASCRIPT에서 LocalStorage에 저장된 option값을 가져오는 법

const selectLanguage = localStorage.getItem("Language");
if (selectLanguage) {
  const option = document.querySelector("option[value =`${selectLanguage}`]");
  option.selected = true;
}

localStorage.getItem으로 localstorage에 저장된 키값이 Language인 변수를 가져온다.

만일 그 변수가 null값이 아니라면, querySelector로 value가 localstorage에 저장된 변수와 같은 option을 가져온다.

그리고 해당 option.selected를 true값으로 변경한다. (selected 속성은 boolean값이라 트루만 줘도 설정이 된다.)

 

JAVASCRIPT에서 LocalStorage에 저장된 option값을 가져오는 법(2번째 방법)

const selector = document.querySelector("select");
const selectLanguage = localStorage.getItem("Language");

if (selectLanguage) {
  for (let i = 0; i < selector.children.length; i++)
    if (selector.children[i].value === selectLanguage)
        selector.children[i].selected = true;
}

querySelector로 select태그를 가져온 localStorage.getItem으로 localstorage에 저장된 키값이 Language인 변수를 가져온다.

 

그리고 만일 그 변수가 null값이 아니라면, select태그.children.length까지 반복문을 돌려 value가 localstorage에 저장된 변수와 같은 option을 찾는다. (children은 무조건 고정된 변수명이다.)

해당 반복문에서 무사히 localstorage에 저장된 변수와 value가 같은 option을 찾으면,

 

select태그.children.selected를 true값으로 변경한다.