Reset list option-value when changing showon value

Question

I am currently writing a module with many backend settings, some of these use the "showon" attribute.

For example: I have two fields of type "list". In the second one, the options are evaluated with the "showon" of the first list.

    <field  name="fieldCat" 
            type="list" 
            default="0" 
            required="" 
            label="Category:" 
            description="">
        <option value="">Select</option>
        <option value="1">Category 1</option>
        <option value="2">Category 2</option>
        <option value="3">Category 3</option>
    </field>
    
    <field  name="fieldItem" 
            type="list" 
            default="0" 
            required="" 
            label="Item:" 
            description="">
        <option value="">Select</option>
        <option value="1" showon="fieldCat:1">Item 1</option>
        <option value="2" showon="fieldCat:2">Item 2</option>
        <option value="3">Item 3</option>
    </field>

If I set the first list to Category 1, Item 1 is displayed and can be selected.

But if I now select Category 2, Item 1 remains in the second list. Please see the picture:

Is it possible to reset the value of the second list (fieldItem) to default when changing the "higher-level" list (fieldCat)? Is this only possible with a custom field?

My currently soulution is, that I have separate subordinate lists (fieldItem1, fieldItem2) for each fieldCat value.

Answer 1

You need to use your own custom JS for this.

Here is an example for your given XML.

(function($) {
    var catFieldName = 'fieldCat';
    var itemFieldName = 'fieldItem';
    
    var showHideFieldOptions = function() {
        var selectedCategory = $('select[name="jform[params][' + catFieldName + ']"]').val(),
            $itemField = $('select[name="jform[params][' + itemFieldName + ']"]');
        
        $itemField.find('option[value="1"], option[value="2"]').attr('disabled', true);
        
        if (selectedCategory == 1) {
            $itemField.find('option[value="1"]').removeAttr('disabled');
        } else if (selectedCategory == 2) {
            $itemField.find('option[value="2"]').removeAttr('disabled');
        }
        
        $itemField.trigger('liszt:updated');
    }
    
    $(function() {
        showHideFieldOptions();
        
        $('select[name="jform[params][' + catFieldName + ']"]').on('change', function() {
            showHideFieldOptions();
        });
    });
    
})(jQuery);

It will be better if you set the item field as required (required="true").