[javascript cart 구현하기]select 중복 선택 경고창 기능 만들어보기!

 

1) select :: 내가 사용한 select 코드는 이렇다. 

value2를 따로 지정 하지않아도 되지만 처음에 헷갈려서 value2를 따로 지정해 둠.

<select id="option_list">
  <option value="" value2="">==옵션을 선택하세요==</option>
  <option value="300000" value2="20평">20평</option>
  <option value="500000" value2="30평">30평</option>
  <option value="650000" value2="40평">40평</option>
</select>

 

2) 선택한 option value값을 배열에 넣어 중복요소들을 제거한다.

 

함수 밖

optionNameArray = new Array // 배열 하나를 만든다.

 

함수 안

 

a) 변수 선언

var optionName = document.getElementById('option_list');
var optionText = optionName.options[optionName.selectedIndex].getAttribute('value2');

value2는 엄밀히 말하면 value의 짭(?) 느낌으로 지정 해 둔 거라 getAttribute를 사용해 값을 가져와야한다.

 

 

b) 배열 요소들 중에 중복값 제거하기

optionNameArray.push(optionText); //선택된 옵션명 전부 새 배열에 넣기
const nameset = new Set(optionNameArray); //set객체 이용해서 중복값을 제거
let name = "";
nameset.forEach((item) => { name += item + "<br>"; }) //중복값 뺀 요소들을 빈 문자열에 집어넣기

document.querySelector('.option_box').innerHTML = name; // 화면에 선택한 option명들을 출력한다.

*이 때 Array.isArray(nameset)을 해 보면 nameset이 배열이 아님을 확인할 수 있다.

 

 

c) 중복값 찾기

const findName = arr => arr.filter((item, index) => arr.indexOf(item) !== index); //중복값 찾는 함수
const duplicateName = findName(optionNameArray); // 함수에 optionNameArray(선택한 옵션들) 넣음
var duplicateNameArray = [...duplicateName ]; //배열로 만들어준다.

 

d) 선택한 옵션이 중복 값 배열 안의 요소와 일치 할 경우 경고창 띄우기

for (i = 0; i < 4; i++) {
 if (optionText == duplicateNameArray[i]) {
  alert('이미 추가 된 옵션입니다.');
  var res = optionName.querySelectorAll('option')[0].selected = 'selected' //select 초기화
  return res;
 }
  }

내가 만들었다.^^ 뿌듯..

for문을 이용해서 option을 선택 할 때마다 중복배열에 들어있는 요소들과 매치시켜본다.

중복값이 있다면 경고창을 띄우고, select를 초기화시킨다.

 

b는 화면에 선택한 옵션명을 중복값을 제외하여 출력하도록 해주고 
c,d는 중복값을 택했을 경우 경고창을 띄워주는 목적이다.
디버깅을 해 보면 이해가 좀 더 잘 된다!

 

 

Code pen

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.