Question

I have 2 select boxes called ‘primaryTag’ and ‘primaryCategory’

primaryCategory depends on primaryTag

There are also 2 multi-select options called ‘tags’ and ‘categories’.

When a ‘primaryTag’ changes, the ‘tags’ should get deselected.

When a ‘primaryCategory’ changes, the ‘categories’ multi-select options should get deselected. Even if the ‘primaryCategory’ gets changed after the change event on primaryTags, the ‘categories’ multi-select should be reset.

I have the following code:

$('document').ready(function(){
    $("#primaryTag").change(function () {
        tagId = $("#{{ admin.uniqId }}_primaryTag option:selected").val();
        $("#primaryCategory").val("option:first");
        $("#tags *").attr("selected", false);
    });

    $("#primaryCategory").change(function () {
        $("#categories *").attr("selected", false);
    });

});

primaryTag and primaryCategory are select boxes.
tags and categories are multi-select boxes.

When I change a primaryTag, the primaryCategory select box gets populated with the default value of the first option as desired. However, I also want the categories multi-select box to be reset (all options deselected). And this is not happening. How can I accomplish this?

Here’s the HTML

Answer 1

$('document') has to be $(document). After that remember the default primary category. On primary tag change set the default primary category and reset the tag options. On primary category change reset the category options.

$(document).ready(function() {
    var iDefault = $("#primaryCategory").val();

    $("#primaryTag").change(function () {
        $("#primaryCategory").val(iDefault);
        $("#tags option").attr("selected", false);
    });

    $("#primaryCategory").change(function () {
        $("#categories option").attr("selected", false);
    });
});

Also see this example.

=== UPDATE ===

If you want to set the first option of the primary categories replace with:

$(document).ready(function() {
    $("#primaryTag").change(function () {
        $("#primaryCategory option:first").attr("selected", true);
        $("#tags option").attr("selected", false);
    });

    $("#primaryCategory").change(function () {
        $("#categories option").attr("selected", false);
    });
});

Also see this example.

=== UPDATE ===

If you want that the categories will be resetted after the primary category was resetted, replace the first version with:

$(document).ready(function() {
    var iDefault = $("#primaryCategory").val();

    $("#primaryTag").change(function () {
        $("#primaryCategory").val(iDefault);
        $("#primaryCategory").change();
        $("#tags option").attr("selected", false);
    });

    $("#primaryCategory").change(function () {
        $("#categories option").attr("selected", false);
    });
});

Also see this updated example.