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

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

자바스크립트로 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 플러그인 확인 이메일 필드 추가하기