JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<select id='griff1'>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='12'>12</option>
</select><p>
<select id='griff2'>
<option value='5' data-coat='0'>5</option>
<option value='6' data-coat='9'>6</option>
<option value='8' data-coat='2'>8</option>
<option value='9' data-coat='0'>9</option>
<option value='12' data-coat='3'>12</option>
</select></p>
Normal sprites:<br><div id='pick1'>..</div><p>
Some with custom coats:<br><div id='pick2'>..</div>

JavaScript

$('#griff1').change(function(){
      var griffid = $("#griff1").val()
      var gid = griffid;
      $('#pick1').html("<img src='http://griffusion.elementfx.com/griffsprite/" + gid + "' width='240' height='163'>");
		});
		
    
		$('#griff2').change(function(){
		
	var coatnum = $(this).find(':selected').data('coat'); 
  // look at data-coat
      var griffid = $("#griff2").val()  // normal value, id
      var gid = griffid;
      var sprite2 = "";
        if(coatnum != 0){ sprite2 = "pics/coats/" +coatnum+ ".png";} else{ sprite2 = "griffsprite/" +gid+ "" ;}
      
      $('#pick2').html("<img src='http://griffusion.elementfx.com/" + sprite2 + "' width='240' height='163'>");
		});