JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<select id="c1"> 
    <option value="Option 1">Option 1</option> 
    <option value="ption 2">Option2,etc</option> 
    <option value="Metadata">Metadata</option> 
</select>  
<select id="c2"> 
    <option value="Option 1">Option 1</option> 
    <option value="Option 2">Option 2, etc.</option> 
    <option id="c2-metadata" value="Metadata">Metadata</option> // This should be shown only when "metadata" in #c1 is selected and hidden when not. 
</select>

CSS

#c2{
 display: none;   
}
#c2-metadata{
 display: none;   
}

JavaScript

$(function(){
    $('#c1').change(function(){
        $('#c2').show();
        if($('#c1').val() == "Metadata"){
           $('#c2-metadata').show();
        }
        else{
           $('c2-#metadata').hide();
        }            
    });  
});