JSFiddle - React, Tailwind, and code Playground

by prodac

HTML

<div class="source_ahref"><a href="http://www.sitepoint.com/">Link One Source</a></div>

<div id="media-bg"> 
    <div id="dropdownlist-nav">
        <label for="source">Choose Category</label><br />
        <select id="source">
            <option selected="selected">--- Select a Category ---</option>
            <option>Compressors</option>
            <option>Filters</option>
            <option>Micro-Smart</option>
            <option>Turbo Jet Modular</option>
            <option>Turbo Smart</option>
        </select>
        <br /><br />
        <label>Choose Model:</label><br />
        <select id="source2a" class="models" style="display: none;">
            <option selected="selected">--- Select Model ---</option>
            <option class="target_ahref" value="#">Link One Target</option>
        </select>
    </div>
</div>

JavaScript

var i = 0;
$(document).ready(function() {
    var bindClickToToggle = function(element) {
        element.click(function() {
            $(this).parents('.dropdown').find('dd ul').toggle();
        });
    };

    $('#source').change(function() {
        if ($('#source option:selected').text() == "Compressors") {
            $('.models').hide();
            $('#source2a').show();
        } else {
            $('.cities').hide();
        }
    });

});

$(".source_ahref a").each(function() {
    var theHref = $(this).attr("href");
    $(this).parent().next().children('.target_ahref').attr("value", theHref);
});