JSFiddle - React, Tailwind, and code Playground

by Osman Salihovic

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="form-group">
  <label>Claim Value</label>
  <select id="select" data-on-change='[{"77":"spec_value,currency", "1":"percentage","2":"third"}]'>
    <option disabled selected>Please select</option>
    <option value="1">Specific value</option>
    <option value="2">Percentage</option>
    <option value="3">Third field</option>
  </select>
</div>

<div id="percentage" class="form-group">
  <label>Percentage</label>
  <input type="text" value="" placeholder="%">
</div>
<div id="spec_value" class="form-group">
  <label>Value</label>
  <input type="text" value="" placeholder="">
</div>
<div id="currency" class="form-group">
  <label>Currency</label>
  <input type="text" value="" placeholder="">
</div>
<br />
<div id="third" class="form-group">
  <label>Just another (third group) field</label>
  <input type="text" value="" placeholder="">
</div>

JavaScript

$(function() {
  $('select[data-on-change]').on('change', function() {
      var obj=$(this).data('on-change');
      var val = $(this).val();
			$.each(obj, function(index, f) {
          $.each(f, function (i,v){
          var els=v.split(',');
          if(val==i)
          {
          	$.each(els, function (j, el){
            	$('#'+el).toggle();
            });
          }
          
						
        });
			});      
  });
});