Populate a bootstrap dropdown menu with another dropdown menu

Question

I have looked at all the questions similar to mine and can't seem to figure this out. I am trying to change the information that is presented in one drop down menu when another drop down menu is changed.

Here is what I have:

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle product-dropdown" type="button"
            id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
        Product Type
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu product" aria-labelledby="dropdownMenu1">
        <li><a href="#">Banner</a></li>
        <li><a href="#">Magnet</a></li>
        <li><a href="#">Sticker</a></li>
        <li><a href="#">Decal</a></li>
        <li><a href="#">Yard Sign</a></li>
        <li><a href="#">Digital Print</a></li>
        <li><a href="#">Business Sign</a></li>
    </ul>
</div>

The above dropdown will change this dropdown:

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle option-dropdown" type="button"
            id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="true">
        Options
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu option" aria-labelledby="dropdownMenu1">
        <li><a href="#">test</a></li>
    </ul>
</div>

I want the option title to change, which I have achieved. Also I want the dropdown menu to change.

$(".product li a").click(function() {
    $(".product-dropdown:first-child").html($(this).text() + ' <span class="caret"></span>');
});
$(".product li a").click(function() {
    $(".option-dropdown:first-child").html($(this).text() + " Option's"+ ' <span class="caret"></span>');
});

The above Javascript is working, however I want the second dropdown to be filled with the below information:

var productType = [];
productType["Banner"] = ["Grommets", "UV Protection", "Gloss Finish", "Matte Finish"];
productType["Mangets"] = ["Rounded Corners", "UV Protection", "Contour Cut"];
productType["Sticker"] = ["Contour Cut", "UV Protection"];
productType["Decal"] = ["Contour Cut", "UV Protection"];
productType["Yard Sign"] = ["Step Stakes", "UV Protection", "Double Sided", "Rounded Corners", "Contour Cut"];
productType["Digital Print"] = ["Grommets", "UV Protection", "Gloss Finish", "Matte Finish"];
productType["Business Signs"] = ["Double Sided", "Drilled Holes", "Rounded Corners", "Reflective"];