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

<scriptsrc="https://code.jquery.com/jquery-1.12.3.min.js"></script><divid="product-options-wrapper"class="product-options"><divclass="opts-container"><divclass="counter">1</div><labelclass="required"><em>*</em>First Option</label><divclass="input-box"><selectid="attribute1211"class="required-entry super-attribute-select"name="super_attribute[1211]"><optionvalue="">Choose an Option...</option><optionvalue="1747"price="0"data-label="vinyl matt">Vinyl Matt</option><optionvalue="1748"price="0"data-label="vinyl silk">Vinyl Silk</option><optionvalue="1749"price="0"data-label="vinyl soft sheen">Vinyl Soft Sheen</option><optionvalue="1746"price="0"data-label="high gloss">High Gloss</option><optionvalue="1745"price="0"data-label="eggshell">Eggshell</option><optionvalue="1740"price="0"data-label="diamond eggshell">Diamond Eggshell</option></select></div></div><divclass="opts-container"><divclass="counter">2</div><labelclass="required"><em>*</em>Size</label><divclass="input-box"><selectid="attribute1219"class="required-entry super-attribute-select"name="super_attribute[1219]"><optionvalue="">Choose an Option...</option><optionvalue="1718"price="0"data-label="5 litre">5 Litre</option><optionvalue="1719"price="0"data-label="2.5 litre">2.5 Litre</option><optionvalue="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);