Disable Second Dropdown If The First Is Not Selected

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

Solution 1:

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 ...

Solution 2:

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/

Solution 3:

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);