Question

We have orders from on high to add two menus to cases: Department and Division, for which we are using Custom Fields (which works great, by the way). Anyway, a department belongs to only one division, so if you know one, you can derive the other. We're trying to use BugMonkey to automatically select the division when the department is selected.

For example, if Accounting is chosen in the department menu, we want Finance to be selected in the division menu. We have code that works, in that the correct choice in the division menu is chosen, but it does not update the display of the menu. If you actually look in the menu, you see Finance selected, but the display still says "Unknown". Perhaps a screen shot would help:

So the question is, how do we get that menu to show that Finance has been selected? The code is below, and it works when we put it on a plain HTML page that just uses jQuery and none of the FogBugz Javascript:

$("#departmentG12").change(function() {
  if( $('#departmentG12').val()=='Accounting' ) {
    $("#divisionT81 option[value='Finance']").attr("selected", "selected");
  }
});

Answer 1

FogBugz overrides the basic <SELECT> element with its own version (which supports things like substring matching).

Your current code changes the value of the overridden control; you also need to set the display value of the overriding control. In the current implementation of FogBugz, the displayed value is in an <INPUT> element that is in the same <DIV> as the overridden <SELECT>

Given the <SELECT> control, you could set the display value like this:

$("#divisionT81").parents("div:first").find("input").val("Finance");

Since other folks may want to do something similar, here's a general solution:

// Have a dropdown drive the selection in another dropdown
// (Useful for cases where the selection of one implies a 
// selection in another). Given a mapping like
// "MyDependentValue": ["SomeDrivingValue", "Anotherone"], 
// when the "child" field is set to one of the values in the 
// array such as "SomeDrivingValue", the "parent" field will 
// be set to the key, in this case "MyDependentValue"

(function() {

    var options = [
    {
        parent: "Division",
        child: "Department",
        map: {
            "Finance": ["Accounting"],
            "Human Resources": ["Job Listings", "Career Fairs"]
        }
    },
    {
        parent: "Food Type",
        child: "Food",
        map: {
            "Fruit": ["Apple", "Banana", "Orange"],
            "Vegetable": ["Celery", "Lettuce"],
            "Other": ["Candy Bar", "Potato Chips"]
        }
    }
    // ... additional mappings ...
   ];

    var updateFields = function() {
        var opt = $(this).data("opt");
        var val = $(this).val();
        $.each(opt.map, function(parentValue, children) {
            if ($.inArray(val, children) >= 0) {
                findSelect(opt.parent)
                .find("option[value=" + parentValue + "]")
                .attr("selected", "selected")
                .parents("div:first")
                .find("input")
                .val(parentValue);
                return false;
            }
        });
    };

    var findSelect = function(label) {
        return $("label[for^=P]")
            .filter(function() {
                return $(this).text() == label;
            })
            .parent()
            .find("select")
    };

    var init = function() {
        return setTimeout(function() {
            $.each(options, function(ix, opt) {
                findSelect(opt.child)
                .data("opt", opt)
                .change(updateFields)
                .change();
            });
        }, 1);
    };

    $(function() {
        if (!$("#BugFields").length) return;
        /* Handle switching from view to edit */
        TabManager.renderView = (function(fnOld) {
            return function(F) {
                return fnOld.call(TabManager, F) && init();
            };
        })(TabManager.renderView);

        init();
    });
})();