JSFiddle - React, Tailwind, and code Playground

HTML

<select>
  <option value="oauth">A</option>
  <option value="oauth2">B</option>
  <option value="matrix">matrix</option>
  <option value="http_basic">http_basic</option>
  <option value="digest">digest</option>
</select>

<div class="wrapper">
  <div data-show-if="[oauth]" style="display: none">
    A
  </div>
  <div data-show-if="[oauth2]" style="display: none">
    B
  </div>
  <div data-show-if="[C]" style="display: none">
    C
  </div>
  <div data-show-if="[matrix][http_basic][digest]" style="display: none">
    Username and password fields....
  </div>
  <p data-show-if="[matrix]" style="display: none">
    This is the note
  </p>
</div>

JavaScript

$('select').change(function(){
	var thisVal = $(this).val();
  //hide all first
  $('.wrapper').find('div,p').hide();
  //show the matching ones
  $('.wrapper').find('[data-show-if*="['+ thisVal +']"]').show();
});