Disable second dropdown if the first is not selected
<p>I want to disable the second dropdown if the first dropdown is not selected, is there any way to do this with javascript? So the idea is: if the first dropdown is not selected, the second dropdown must be disabled. I just want to say that I can't add any ID or any class to the dropdown, all classes and id's are dynamically generated, so the html code will remain the same, I use Magento platform. </p>

<p><strong>HTML structure:</strong></p>

<pre><code>&lt;div id="product-options-wrapper" class="product-options"&gt;
    &lt;div class="opts-container"&gt;
        &lt;div class="counter"&gt;1&lt;/div&gt;
            &lt;label class="required"&gt;&lt;em&gt;*&lt;/em&gt;First Option&lt;/label&gt;
            &lt;div class="input-box"&gt;
                &lt;select id="attribute1211" class="required-entry super-attribute-select" name="super_attribute[1211]"&gt;
                    &lt;option value=""&gt;Choose an Option...&lt;/option&gt;
                    &lt;option value="1747" price="0" data-label="vinyl matt"&gt;Vinyl Matt&lt;/option&gt;
                    &lt;option value="1748" price="0" data-label="vinyl silk"&gt;Vinyl Silk&lt;/option&gt;
                    &lt;option value="1749" price="0" data-label="vinyl soft sheen"&gt;Vinyl Soft Sheen&lt;/option&gt;
                    &lt;option value="1746" price="0" data-label="high gloss"&gt;High Gloss&lt;/option&gt;
                    &lt;option value="1745" price="0" data-label="eggshell"&gt;Eggshell&lt;/option&gt;
                    &lt;option value="1740" price="0" data-label="diamond eggshell"&gt;Diamond Eggshell&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="opts-container"&gt;
        &lt;div class="counter"&gt;2&lt;/div&gt;
        &lt;label class="required"&gt;&lt;em&gt;*&lt;/em&gt;Size&lt;/label&gt;
        &lt;div class="input-box"&gt;
            &lt;select id="attribute1219" class="required-entry super-attribute-select" name="super_attribute[1219]"&gt;
                &lt;option value=""&gt;Choose an Option...&lt;/option&gt;
                &lt;option value="1718" price="0" data-label="5 litre"&gt;5 Litre&lt;/option&gt;
                &lt;option value="1719" price="0" data-label="2.5 litre"&gt;2.5 Litre&lt;/option&gt;
                &lt;option value="1714" price="0" data-label="1 litre"&gt;1 Litre&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>PHP code where the super attribute is generated:</p>

<pre><code>  &lt;dl&gt;
    &lt;?php foreach($_attributes as $_attribute): ?&gt;
        &lt;?php
        $_rendered = false;
        foreach ($_renderers as $_rendererName):
            $_renderer = $this-&gt;getChild('attr_renderers')-&gt;getChild($_rendererName);
            if (method_exists($_renderer, 'shouldRender') &amp;&amp; $_renderer-&gt;shouldRender($_attribute, $_jsonConfig)):
                $_renderer-&gt;setProduct($_product);
                $_renderer-&gt;setAttributeObj($_attribute);
                echo $_renderer-&gt;toHtml();
                $_rendered = true;
                break;
            endif;
        endforeach;

        if (!$_rendered):
        ?&gt;
        &lt;dt&gt;&lt;label class="required"&gt;&lt;em&gt;*&lt;/em&gt;&lt;?php echo $_attribute-&gt;getLabel() ?&gt;&lt;/label&gt;&lt;/dt&gt;
        &lt;dd&lt;?php if ($_attribute-&gt;decoratedIsLast){?&gt; class="last"&lt;?php }?&gt;&gt;
            &lt;div class="input-box"&gt;
                &lt;select name="super_attribute[&lt;?php echo $_attribute-&gt;getAttributeId() ?&gt;]" id="attribute&lt;?php echo $_attribute-&gt;getAttributeId() ?&gt;" class="required-entry super-attribute-select"&gt;
                    &lt;option&gt;&lt;?php echo $this-&gt;__('Choose an Option...') ?&gt;&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
        &lt;/dd&gt;
        &lt;?php endif; ?&gt;
    &lt;?php endforeach; ?&gt;
    &lt;/dl&gt;
</code></pre>