JSFiddle - React, Tailwind, and code Playground

by 1337

HTML

<!-- POSITIONS -->
<div class="styled">
    <select id="position">
        <option selected disabled>Select Position</option>
        <optgroup label="OFFENSE">
            <option value="QB">QB</option>
            <option value="HB">HB</option>
            <option value="FB">FB</option>
            <option value="WR">WR</option>
            <option value="TE">TE</option>
            <option value="LT">LT</option>
            <option value="LG">LG</option>
            <option value="C">C</option>
            <option value="RG">RG</option>
            <option value="RT">RT</option>
        </optgroup>
        <optgroup label="DEFENSE">
            <option value="LE">LE</option>
            <option value="RE">RE</option>
            <option value="DT">DT</option>
            <option value="LOLB">LOLB</option>
            <option value="MLB">MLB</option>
            <option value="ROLB">ROLB</option>
            <option value="CB">CB</option>
            <option value="FS">FS</option>
            <option value="SS">SS</option>
        </optgroup>
        <optgroup label="SPECIAL TEAMS">
            <option value="K">K</option>
            <option value="P">P</option>
        </optgroup>
        <optgroup label="COACH">
            <option value="HC">HC</option>
        </optgroup>
    </select>
</div>
<!-- ATTRIBUTES -->
<div class="styled">
    <select id="attribute_type_1">
        <option selected disabled>Select Attribute Type</option>
        <option value="SPD">SPD</option>
        <option value="STR">STR</option>
        <option value="AGI">AGI</option>
        <option value="ACC">ACC</option>
        <option value="AWR">AWR</option>
        <option value="TRCK">TRCK</option>
        <option value="ELUS">ELUS</option>
        <option value="BCV">BCV</option>
        <option value="STIF">STIF</option>
        <option value="SMOV">SMOV</option>
        <option value="JMOV">JMOV</option>
        <option value="CARY">CARY</option>
        <option...

JavaScript

$("select").change(function(){

    var sl = $(this).find("option:selected").text();

    $(this).nextAll("select").find("option").filter(function (){

        return ($(this).text() == sl) ? true : false;

    }).prop("selected", true);

});