JSFiddle - React, Tailwind, and code Playground

by bridget_kilgallon

HTML

<select class="selectOption">
    <option>28</option>
    <option>30</option>
    <option>32</option>
    <option>34</option>
    <option>36</option>
    <option>38</option>
    </select>
    
    <div id="changingArea">
        <div id="28" class="desc">XS - Extra Small</div>
        <div id="30" class="desc">XS - Extra Small or SM - Small</div>
        <div id="32" class="desc">SM - Small</div>
        <div id="34" class="desc">SM - Small or MD - Medium</div>
        <div id="36" class="desc">MD - Medium</div>
        <div id="38" class="desc">LG - Large</div>
    </div>
 
 <select class="selectOption2">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>DD</option>
    <option>DD+</option>
    </select>
    
    <div id="changingArea2">
        <div id="A" class="desc2">Low Cut</div>
        <div id="B" class="desc2">Low Cut</div>
        <div id="C" class="desc2">Low Cut or High Cut</div>
        <div id="D" class="desc2">High Cut</div>
        <div id="DD" class="desc2">High Cut</div>
        <div id="DD +" class="desc2">TOURA does not currently support this cup size. Stay tuned for FURA!</div>
    </div>

CSS

.desc, .desc2 {display: none;}

JavaScript

$(function(){
          $('.selectOption').change(function(){
            var selected = $(this).find(':selected').text();
            //alert(selected);
            $(".desc").hide();
             $('#' + selected).show();
          }).change()
});

$(function(){
          $('.selectOption2').change(function(){
            var selected = $(this).find(':selected').text();
            //alert(selected);
            $(".desc2").hide();
             $('#' + selected).show();
          }).change()
});