Disabling a Select Option doesn't completely disable it

[cpaschen]

I've got the following code associated with a multi-select custom field that will take a list of selections (i.e. their 'values' in 'selectedCategories') and then will loop through the select options and disable the ones that are in the provided array:

/* Filter 'other fiction categories' */
filterOtherFictionCategories = function(selectedCategories) {
    console.log('filterOtherFictionCategories:' + selectedCategories);
    //foreach selectedCategory
    for (let i = 0; i < selectedCategories.length; i++) {
        console.log('FictionCategoryToFilter: ' + selectedCategories[i]);
        jQuery('#jform_fiction_categories_other option[value='+selectedCategories[i]+']').attr("disabled","disabled");
	    jQuery('#jform_fiction_categories_other_chzn').hide;
	}
}

This 'kinda' works as when inspecting the individual items, they all get the attribute disabled associated with them. However, the options that are disabled still appear in the list. If I then select one of those items it gets selected. Although if I try to un-select it, it then can't be un-selected (I guess it finally gets disabled).

A similar thing happens when I try to 'remove' the item/s instead of making them disabled:

jQuery('#jform_fiction_categories_other option[value='+selectedCategories[i]+']').remove();

The items are not there in the visible select item list, but they are there on the view of the page.

I've noticed that the selections are disabled or removed from the select list, but they are not changed in any way in the ul.chzn-results list.

Does anyone know how to automatically (or with some jQuery) get the display to refresh after programmatically changing these select options?
Or do I need to manually need to update the ul.chzn-results lists myself (I sure hope not).

OR do you have other ways to programmatically make select options not available to the user via js/jQuery?

[cpaschen]

I should note that running this code outside of Joomla seems to work fine. Something within Joomla (or the code that JCB creates) is causing this to not work.

But then again, outside of Joomla the site doesn't have a ul.chzn-results list, so I'm guessing it's somehow related to that.

So the bottom line is ... how do you programmatically change a select list's options via js/jquery that will update the list view?

[cpaschen]

OK ... found the solution. You do have to manually 'nudge' the select object so that it refreshes with the updated changes:

mainObject.trigger("liszt:updated");

Where mainObject is the object that was programmatically changed.
i.e.

var mainObject = jQuery('#jform_fiction_categories_other');

Hope that's helpful to someone else.