如何转换为 $('#' + $(this).val()).show() vanilla javascipt

Question

如何将此代码转换为香草？

$('#optionselector').change(function(){
    $('.option-type').hide();
    $('#' + $(this).val()).show();
});

我无法弄清楚最后一行：

function addEventHandler(elem, eventType, handler) {
  if (elem.addEventListener)
    elem.addEventListener(eventType, handler, false);
  else if (elem.attachEvent)
    elem.attachEvent('on' + eventType, handler);
}

addEventHandler(document, 'DOMContentLoaded', function() {
  addEventHandler(document.getElementById('optionselector'), 'change', function() {
    document.querySelector('.option-type').style.display = 'none';

  });
});

这是jsfiddle

Answer 1

大概只是：

document.querySelector('#' + this.value).style.display = 'block';

请参阅下面的实时示例：

 function addEventHandler(elem, eventType, handler) { if (elem.addEventListener) elem.addEventListener(eventType, handler, false); else if (elem.attachEvent) elem.attachEvent('on' + eventType, handler); } addEventHandler(document, 'DOMContentLoaded', function() { addEventHandler(document.getElementById('optionselector'), 'change', function() { document.querySelectorAll('.d-none').forEach(e => e.style.display = 'none'); if(this.value !== "") document.querySelector('#' + this.value).style.display = 'block'; }); });

 .d-none { display:none; }

 <select name="option_type" class="option-type form-control mb-4" id="optionselector"> <option value="" selected="selected"></option> <option value="text_type">Text Input</option> <option value="select_type">Select Dropdown</option> <option value="radio_type">Radiobox</option> </select> <div class="d-none" id="text_type">TEXT</div> <div class="d-none" id="select_type">SELECT</div> <div class="d-none" id="radio_type">RADIO</div>