select2 will not disable or clear

Question

I have a secondary select slaved to a primary select (pick a store, then pick a department - identical to pick a country, then pick a state).

I absolutely cannot get select2's ('enable',false) and ('data', null) methods to work, no matter how much other code I tear out.

<select id="stores">
  <option value="foo">foo</option>
</select>
<select id="depts">
  <option value="bar">bar</option>
</select>

// ...some logic that selects a store, then fetches that store's depts ...

$('#depts').select2('enable',false);// does not disable control
$('#depts').select2('data',null); // does not clear control

So I'm forced to do this:

$('select#depts').empty(); // clears HTML element
$('#depts').select2(); // re-enhances select w/ select2
$('#depts').select2('disable',true); // disables 

It behaves itself in jsfiddle, so I can't even post an example and request help. I'm just ... stumped.

Answer 1

This code should work in all browsers (select2 v4.0.4):

To disable:

$('select').prop('disabled', true).trigger('change');

To enable:

$('select').prop('disabled', false).trigger('change');