[javascript]나눈 배열을 select의 option 태그로 선택할수 있게 만들기

배열 나누는 법

먼저 배열을 나눠야 하기때문에 배열나누기는 밑의 링크 참조

https://korearaogong.tistory.com/31

[javascript]배열 나누기

 

let ex_ex = ['안녕','하세요','한궈','라오꽁','입니다','배열','쪼개서','옵션','태그로','넣습니다'];//10개 배열
let selected = document.getElementById('list');//select 태그 선택
let select_c = ex_ex.length / 3; //예문을 3개씩 쪼개기 3라는 숫자를 쪼개고 싶은만큼으로 바꾸면됨

function f_option(){
  selected.style.display = 'inline';
  selected.options.length = 0;//셀렉트의 옵션 모두 지우기 즉 초기화
  for (var i = 0; i <= Math.ceil(select_c) - 1; i++){//select_c를 나눴을때 소수점이 있을수 있기 때문에 올림으로 ceil를 사용, 마지막 option값은 3개가 아닐 수 있기 때문에 -1
    var opt = document.createElement('option');//select태그의 자식인 option태그 생성
    opt.value = i;//생성한 option태그의 값은 i값 즉 0부터 반복된 숫자
    opt.innerHTML = i + 1 + "번 파일 : (3개)";//option태그에 i값을 출력, i는 0부터 시작이기때문에 +1, 역시 3라는 숫자를 쪼개는 숫자만큼 바꾸면 됨
    selected.appendChild(opt);//select태그로 추가하기
  }
  if(selected.length != 0){//마지막 옵션값이 있다면(딱맞아 떨어지지 않는다면)
    if(ex_ex.length / 3 % 1 != 0){//셀렉트의 마지막 옵션 갯수 표기 제대로 하기
      selected[Math.floor(select_c)].innerText = i + "번 파일 : (" + ex_ex_arr[Number(Math.floor(select_c))].length + "개)";//에문의 마지막 배열을 찾기 위해 ceil(올림)이 아닌 floor(내림)으로 마지막 벼열을 선택해서 입력하기
    }
  }
}

나누는 값인 숫자 3을 변수로 바꿔 넣으면 변수에 맞게 나눠서 사용 할 수 있다

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