Hide/Show Select2
I do a similar thing, however I hide the select2 container which is always the next node over from the start point so it would look like.
$(document).on('change', '.country', function () {
if ($(this).val() == $(this).data('current-countryCode')) {
$('#states').next(".select2-container").show();
}
else {
$('#states').next(".select2-container").hide();
}
});
So I have been taking the same approach you have
The problem is that you have to hide all the items associated with the select2 dropdown (all that the plugin generates to do the magic).
I solved using a div that contains the select2 dropdown and show/hide this div.