JQuery – data field 값에 따라 option 표시

특정 제품이 선택되면 종속적인 옵션을 보여주고, 숨기고 해야 하는 응용이 상당히 많이 있다.

DB에서 가져올 때 필터링 해서 가져오면 좋은데, 대부분 경우 이미 가져온 데이터를 브라우저 렌더링시에 필터링해서 보여주고 숨기고 하는것이 효율적이다. show / hide 기능을 쓸수 있어야 하는데,

편법인지 모르지만 data-xxx=”xxx” 이런 html tag 에 추가해두면 JQuery 에서 data() 함수로 바로 읽을 수 있다.

이를 이용해서 .show() .hide() 기능을 활용하면 원하는 결과를 얻을 수 있다.

JQuery 코드는 아래와 같다.

$("[name$='product']").on("change", function(){
    var product_code = parseInt($(this).val());
    $(".productselect option").hide().filter('[data-product='+product_code+']').show();
    $(".productsetselect option").hide().filter('[data-'+product_code+'='+product_code+']').show();
    $(".productsetselect option").hide();
    var options = $('.productsetselect option');
    var values = $.map(options ,function(option) {
      var getdata = $(option).data("product");
      // if (jQuery.type(getdata) === "number") {
      //   if (getdata == product_code) {
      //     $(option).show();
      //   }
      // }
      if (jQuery.type(getdata) === "array") {
        if (getdata.indexOf(product_code) >= 0) {
          $(option).show();
        }
      }
    });
});

적용되는 HTML 코드는 아래와 같다. 볼드로 강조해 두었다.

<div class="col-auto"><label class="form-label">펌웨어</label><select name="fwver1" class="form-select flex-fill companyselect productsetselect" id="id_fwver1">
  <option value="" selected>---------</option>

  <option value="51" <strong>data-company="1" data-208="208" data-200="200" data-product="[208, 200]"</strong>>avatar.png (twareLAB)</option>

  <option value="54" data-company="1" data-product="[]">filename (twareLAB)</option>

  <option value="65" <strong>data-company="1" data-208="208" data-product="[208]"</strong>>img001.gif (twareLAB)</option>

  <option value="66" data-company="1" data-product="[]">img002.gif (twareLAB)</option>

  <option value="67" data-company="1" data-product="[]">img003.png (twareLAB)</option>

  <option value="69" data-company="1" data-product="[]">img005.png (twareLAB)</option>

  <option value="70" data-company="1" data-208="208" data-product="[208]">img016.png (twareLAB)</option>

  <option value="68" data-company="1" data-product="[]">img016.png (twareLAB)</option>

  <option value="52" data-company="1" data-208="208" data-product="[208]">img020.png (twareLAB)</option>

  <option value="58" data-company="1" data-product="[]">img097.png (twareLAB)</option>

  <option value="56" data-company="1" data-221="221" data-product="[221]">img098.png (twareLAB)</option>

이렇게 되면, Product 가 선택될 때 해당 프로덕트에 맞는 펌웨어 리스트만 나오도록 표현할 수 있다.

productselect 클래스의 option을 전부 hide() 한 다음, 에서 data-product 값이 해당 값인 경우 show() 하도록 코드를 구성했다.

array 값이 올 수 도 있기 때문에, 이경우에는 간단하게 filter 함수로 이 components 들을 다 가져올 수 없어서, map() 함수로 iteration 하도록 구현해 봤다.

대안으로 data-productcode=”productcode” 형태로 나오도록 또 추가해서 간단하게 한줄로 가능하게 하는 것도 같이 추가해뒀다.

참고하시길..

Django Formfield 값에 data-xxx 속성을 넣는 방법은 다른 포스팅에서 올리겠다.