Disable second dropdown if the first is not selected

Question

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.

HTML structure:

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

PHP code where the super attribute is generated:

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

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

Answer 1

Pure JS you may do something like this

var s1 = document.getElementById("attribute1211"),
    s2 = document.getElementById("attribute1219");
s2.disabled = true;
s1.addEventListener("change", e => s2.disabled = s1.value === "" ? true : false, false);

Answer 2

If you can use the attribute "name", my proposal is:

$(function () {
  $('select[name="super_attribute[1219]"]').hide().parents().slice(0,2).hide()

  $('select[name="super_attribute[1211]"]').on('change', function (e) {
    if ($(this).find('option:selected').index() === 0) {
      $('select[name="super_attribute[1219]"]').hide().parents().slice(0,2).hide();
    } else {
      $('select[name="super_attribute[1219]"]').show().parents().slice(0,2).show();
    }
  });
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>


<div id="product-options-wrapper" class="product-options">
    <div class="opts-container">
        <div class="counter">1</div>
        <label class="required"><em>*</em>First Option</label>

        <div class="input-box">
            <select id="attribute1211" class="required-entry super-attribute-select" name="super_attribute[1211]">
                <option value="">Choose an Option...</option>
                <option value="1747" price="0" data-label="vinyl matt">Vinyl Matt</option>
                <option value="1748" price="0" data-label="vinyl silk">Vinyl Silk</option>
                <option value="1749" price="0" data-label="vinyl soft sheen">Vinyl Soft Sheen</option>
                <option value="1746" price="0" data-label="high gloss">High Gloss</option>
                <option value="1745" price="0" data-label="eggshell">Eggshell</option>
                <option value="1740" price="0" data-label="diamond eggshell">Diamond Eggshell</option>
            </select>
        </div>
    </div>
    <div class="opts-container">
        <div class="counter">2</div>
        <label class="required"><em>*</em>Size</label>

        <div class="input-box">
            <select id="attribute1219" class="required-entry super-attribute-select" name="super_attribute[1219]">
                <option value="">Choose an Option...</option>
                <option value="1718" price="0" data-label="5 litre">5 Litre</option>
                <option value="1719" price="0" data-label="2.5 litre">2.5 Litre</option>
                <option value="1714" price="0" data-label="1 litre">1 Litre</option>
            </select>
        </div>
    </div>
</div>

If you cannot use the IDs and the attribute "name" a possible solution could be, just for instance, based on the HTML structure. If such a structure is always the same, you may select the first select:

$('div div div select').eq(0)

For the second select:

$('div div div select').eq(1)

Another alternative method is to apply the jQuery filter to select elements having a special attribute containing a numbber ...

Answer 3

You can use a jquery to bind the change event like this

$('#attribute1211').change(function(e){
     $('#attribute1219').prop('disabled', !$(this).val());
});

And on the load function add this to disable second select at load time:

$(function(){
    $('#attribute1219').prop('disabled', true);
});

See the JSFiddle https://jsfiddle.net/9gexw82r/