CODEWITHSUNDEEP
javascriptjquery
Amit
Amit

Reputation: 3754

how to trigger new function when a select box gets changed via javascript?

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

Upvotes: 0

Views: 247

Answers (3)

scessor
scessor

Reputation: 16115

$('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.

Upvotes: 1

Michael Slade
Michael Slade

Reputation: 13877

There are basically two ways to clear a multi-select box using jQuery:

$("#my_select_box").val(null);

or

$("#my_select_box option").attr("selected",false);

The first changes the value of the select element to nothing. The second removes the selected attribute of all of the options in the select element.

I am guessing the effect of your code is:

$("#my_select_box").attr("selected",false);

which doesn't work because #my_select_box is the actual select element. Removing the selected attribute of the select element itself has no effect because that attribute has meaning only for the options inside it.

You really must try Firebug, or the developer tools built into chrome. They can help immensely in debugging javascript and jQuery code.

Upvotes: 0

tgb
tgb

Reputation: 93

you can use the onclick function.

<element onclick="newfunction()"></element>

Upvotes: 0

Related Questions