[Javascript] 자바스크립트로 Select 옵션 재설정/변경하기

셀렉트(Select) 박스의 옵션을 재설정하고 싶은 경우 자바스크립트나 jQuery를 사용하여 옵션값을 변경할 수 있습니다. 이 글에서는 자바스크립트와 jQuery를 사용하여 Select 옵션값을 변경하는 방법에 대해 살펴보고, 예시를 통해 이를 워드프레스에 응용하는 방법에 대해서도 간단히 살펴봅니다.

목차

• 1 자바스크립트로 Select 옵션 재설정/변경하기
• 2 응용: 워드프레스 TablePress 플러그인으로 만든 표의 페이지네이션 필터 항목 개수 재설정하기
• 2.1 자바스크립트 코드를 워드프레스에 로드하기
• 3 참고

자바스크립트로 Select 옵션 재설정/변경하기

Javascript로 셀렉트 박스의 옵션을 비우고 다른 값으로 교체하려는 경우 다음과 같은 코드를 사용할 수 있습니다.

var list = ["AB", "BC", "MB", "NB", "NL", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT"];

populateCombo(emptyCombo(document.querySelector('.select.optional')), list);

function emptyCombo(selectEl) {
  selectEl.options.length = 0;
  return selectEl;
}

function populateCombo(selectEl, items) {
  return appendChildren(selectEl, items.map(item => new Option(item, item)));
}

function appendChildren(el, children) {
  children.forEach(child => el.appendChild(child));
  return el;
}

// 출처: https://stackoverflow.com/questions/49885233/replace-all-options-in-select-element-from-list

위의 코드는 Stackoverflow 글 "Replace all options in select element from list(목록에서 select 요소의 모든 옵션 바꾸기)"에 제시된 것입니다. 위의 코드로 테스트해보니 예상대로 잘 작동하네요.

동일 글에서 다음과 같은 코드를 제시하는 분도 있습니다.

var outletOptions = document.querySelector("#your_select_option_id_name");

// Remove existing options, 기존 옵션 제거
Array.from(outletOptions).forEach((option) => {
  outletOptions.removeChild(option)
})

// get or set your new options here, 여기에 새 옵션 가져오기 또는 설정
var newOutletOptions = [["option name 1", "firstValue"], ["option name 2", "secondValue"]]

// Add new options, 새 옵션 추가
newOutletOptions.map((optionData) => {
  var opt = document.createElement('option')
  opt.appendChild(document.createTextNode(optionData[0]));
  opt.value = optionData[1]
  outletOptions.appendChild(opt);
})

위의 코드는 테스트해보지 않았습니다. 

jQuery 방법도 있습니다. 

/** jQuery plugins */
(function($) {
  // Populates a select drop-down with options in a list 
  $.fn.populate = function(list) {
    return this.append(list.map(item => $('<option>', {
      text  : item,
      value : item
    })));
  };
})(jQuery);

var list = ["AB", "BC", "MB", "NB", "NL", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT"];

$('.select.optional').empty().populate(list);

// https://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery

위의 코드는 How to change options of <select> with jQuery? (jQuery로 <select> 옵션 변경하는 방법)에서 제시된 것으로 테스트해보디 예상대로 작동했습니다.

응용: 워드프레스 TablePress 플러그인으로 만든 표의 페이지네이션 필터 항목 개수 재설정하기

TablePress는 워드프레스에서 표(테이블)를 보다 효과적으로 삽입하고 관리하는 데 사용되는 플러그인입니다. 이 플러그인을 사용하여 표를 삽입할 경우 페이지당 줄수를 기본적으로 10개, 25개, 50개, 100개 중에서 선택할 수 있는 Select 박스가 표시됩니다.

페이지당 표시할 줄 수의 옵션을 변경하고 싶은 경우(예: 10개, 15개, 20개, 25개, 50개, 100개), 다음과 같은 자바스크립트를 사용할 수 있습니다.

// Change the values of "Show xx entries" select box optons in the WordPress TablePress plugin
// 워드프레스 TablePress 플러그인의 페이지네이션에서 "표시할 줄수" select 옵션의 값 변경하기

setTimeout(function(){
var list = ["10", "15", "20", "25", "50", "100"];

populateCombo(emptyCombo(document.querySelector('[name="tablepress-1_length"]')), list);

function emptyCombo(selectEl) {
  selectEl.options.length = 0;
  return selectEl;
}

function populateCombo(selectEl, items) {
  return appendChildren(selectEl, items.map(item => new Option(item, item)));
}

function appendChildren(el, children) {
  children.forEach(child => el.appendChild(child));
  return el;
}
},500);

위의 코드에서 잘못된 부분이 있거나 개선해야 할 부분이 있는 경우, 혹은 더 좋은 방법이 있는 경우 아래의 댓글을 통해 알려주시면 수정하도록 하겠습니다. 클릭 이벤트가 발생할 때 옵션값들을 재설정하고 새로운 값으로 대체하려고 시도해보니 자스에 대한 지식이 부족하여 잘 안 되네요.ㅠ

위와 같은 스크립트를 적용하면 다음과 같이 셀렉트 옵션값이 변경됩니다.

15를 선택하면 예상대로 15개 항목이 한 페이지에 표시되고 하단의 페이지네이션(Pagination)도 잘 작동합니다.

플러그인 소스 파일을 변경하는 방법도 생각할 수 있지만, 플러그인 소스 파일을 수정하게 되면 추후 플러그인이 업데이트될 경우 수정 사항이 사라지게 됩니다.

자바스크립트 코드를 워드프레스에 로드하기

워드프레스에 Javascript 코드를 올바르게 추가하는 방법은 다음 글을 참고해보세요.

워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법 - 워드프레스 정보꾸

위의 글에 제시된 방법을 이용하는 것이 바람직합니다. 그리고 특정 페이지에서만 코드가 로드되도록 조건문을 추가하는 것이 좋습니다.

// 특정 페이지에만 로드하기
if ( is_page( '1234' ) ) {
// 코드
}

여러 페이지에 로드하려는 경우 array를 사용합니다.

// 여러 페이지에 코드 실행하기
if (is_page( array( 1, 529, '또는 페이지 제목'  ) ) ) {
// 실행할 코드
}

위의 방법이 어렵게 느껴지는 경우 플러그인을 사용하여 푸터 섹션에 스크립트를 추가할 수 있습니다. 그다지 권장하지 않지만 간편하게 자바스크립트 코드를 삽입할 수 있습니다.

참고

https://avada.tistory.com/2417

엘리멘터(Elementor) 토글 위젯과 아코디언 위젯 차이점

https://avada.tistory.com/2433

워드프레스 Quform 플러그인 확인 이메일 필드 추가하기