[JQuery] 조건부 서브 셀렉트(Sub select) 생성

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="select-container"></div>

$(document).ready(function() {
  var selectOptions = {
    'Option 1': {
      'value': 'option1',
      'subOptions': {
        'Suboption 1A': 'suboption1a',
        'Suboption 1B': 'suboption1b'
      }
    },
    'Option 2': {
      'value': 'option2',
      'subOptions': {
        'Suboption 2A': 'suboption2a',
        'Suboption 2B': 'suboption2b'
      }
    },
    'Option 3': {
      'value': 'option3',
      'subOptions': {
        'Suboption 3A': 'suboption3a',
        'Suboption 3B': 'suboption3b'
      }
    }
  };

  var $select = $('<select>').attr('id', 'my-select');

  $.each(selectOptions, function(key, value) {
    var $option = $('<option>').val(value.value).text(key);
    $option.data('sub-options', value.subOptions);
    $select.append($option);
  });

  $('#select-container').append($select);

  $('#my-select').change(function() {
    var selectedOption = $(this).find(':selected');
    var subOptions = selectedOption.data('sub-options');

    $('#my-sub-select').remove();

    if (subOptions) {
      var $subSelect = $('<select>').attr('id', 'my-sub-select');

      $.each(subOptions, function(key, value) {
        $('<option>').val(value).text(key).appendTo($subSelect);
      });

      $('#select-container').append($subSelect);
    }
  });
});

https://codepen.io/hongjaang/pen/jOQNWVE

 

jOQNWVE