Link the block Dropdown to a product Option

In this example we want the user to select a value from the blocks dropdown but we then need the value to populate the Extra Options. 

Sample 

https://live.w2pstore.com/Store/Default.aspx?PUID=8c153e96f5204bcaa5f25ca338b6c780&Guest=1&CUR=dab7b478fc244d0b8955845f924ab8d7

Step 1: Create the 2 dropdowns; the blocks dropdown should be the same as the Values of the Extra Options dropdown.

Blocks Dropdown: Values Gold::::Gold;Silver

Extra Options dropdowns:

Step 2 you need to find what the ids are using html inspect. It should match the product id 51170 as above.

the blocks id should also match the block id number as found in the Custom Tab.

In the bootstrap layout copy and modify the following code:

<script>

$(function(){

    // separate function created to be called from load or change

    function selectExtraOption()

    {

        var selectedValue = $("#Input688315 option:selected").val();

        $("#ExtraOption_51170 option").each(function() {

            if ($(this).text() == selectedValue) {

                $(this).prop("selected", true);

            } else {

                $(this).prop("selected", false);

            }

        });

    }

    // on change

    $("#Input688315").on("change", selectExtraOption);  

    // on load

    //selectExtraOption();

    // Use setInterval to wait for the dropdown to be ready

    // IMPORTANT: Must be removed if the extra field is removed. IMPORTANT //

    var waitInterval = setInterval(function() {

    if ($("#ExtraOption_51170 option").length > 1) { 

        selectExtraOption();

        clearInterval(waitInterval);

    }

    }, 100);

});

</script>