Question

The script below does what I want it to do except you need to change the ixproject field (Probably because my other projects do not uses subcategory) for the dropdowns to be updated with the new values. Is there a way to refresh certain html elements after their values have been changed.

$(document).ready(function(){
  var categoryChanged = $('#ixCategory');
  var reloadProject = $('#ixProject');
  //  We don't need Schedule Item so remove it.  From our options.
  var removeScheduleItem = document.getElementById("ixCategory");
  var select = document.getElementById("subcategorya85");

  //Remove all options that may exist.  
  function resetSelectBox(){
      var select = document.getElementById("subcategorya85");
      select.options.length = 0;
  }

 //Remove all options before starting.  
  $(document).ready(function() {
    resetSelectBox();
    select.options[0] = new Option("--");
    //removes schedule item from ixcategory
    removeScheduleItem.remove(3);
  });
  categoryChanged.on("change", function(event){
    if (($('#ixCategory')[0].selectedIndex == 0))
    {   
      resetSelectBox();
      select.options[0] = new Option("A", "A");
      select.options[1] = new Option("B", "B");
      select.options[2] = new Option("C", "C");
    } 
    else
    if (($('#ixCategory')[0].selectedIndex == 1)) 
    {
      resetSelectBox();
      select.options[0] = new Option("D", "D");
      select.options[1] = new Option("E", "E");
    }else
    if (($('#ixCategory')[0].selectedIndex == 2)) 
    {
      resetSelectBox();
      select.options[0] = new Option("F", "F");
    }else
    if (($('#ixCategory')[0].selectedIndex == 3)) 
    {
      resetSelectBox();
      select.options[0] = new Option("G", "G");
    }
  }) 
});

EDIT: I copied the exact same script to a Fiddle and got the desired result. http://jsfiddle.net/themaniac27/VNfFH/

What do I need to do differently to get this to work in Fogbugz. This was attempted using the fogbugz on demand trial.

Answer 1

FogBugz' droplists have a variety of additional functionality added to them, so they can be a little tricky to modify directly. Basically, you need to call DropListControl.refresh() and pass in the underlying <select> DOM element. Another thing to consider is that FogBugz can ajaxily transition from viewing a case to editing a case.

Below is a BugMonkey script that should achieve what you're after, but also handles a) how FogBugz droplists work and b) ajax page transitions.

name:          Dynamic subcategory droplist
description:   Updates the available subcategory options based on the category
author:        Dane Bertram
version:       1.0.0.0

js:

// if we're not on the case page, don't do anything
if (!$('#bugviewContainer').length) return;

var subcategoryId = 'subcategorya85';
var jCategory;
var jSubcategory;
var BUG = 1;
var FEATURE = 2;
var INQUIRY = 3;
var SCHEDULE_ITEM = 4;

function addOption(newVal) {
  jSubcategory.append($("<option>").attr('value', newVal).text(newVal));
}

function removeScheduleItem () {
  DropListControl.refresh(
    jCategory
      .find('option[value="' + SCHEDULE_ITEM + '"]')
      .remove()
      .end()[0] // pop back up to the select element
  );
}

function updateSubcategory() {
  var ixCategory = parseInt(jCategory.val(), 10);
  jSubcategory.empty();
  switch (ixCategory) {
    case BUG:
      addOption('A');
      addOption('B');
      addOption('C');
      break;
    case FEATURE:
      addOption('D');
      addOption('E');
      break;
    case INQUIRY:
      addOption('F');
      break;
    default:
      addOption('--');
      break;
  }
  DropListControl.refresh(jSubcategory[0]);
}

function init() {
  jCategory = $('#ixCategory');
  jSubcategory = $('#' + subcategoryId);

  // if the category droplist isn't present, there's nothing to do
  if (!jCategory.length) return;

  // we don't need Schedule Item so remove it from our options.
  removeScheduleItem();

  // remove all options before starting
  updateSubcategory();
}

init(); // in case we just loaded the edit page
$('body').on("change", "#ixCategory", updateSubcategory);
$(window).on('BugViewChange', function(e, data) {
  if (data.sCommand === 'edit') {
    // add delay to allow for view transition
    setTimeout(init, 100);
  }
});

Just a couple notes:

1. Make sure subcategoryId matches the id attribute of your subcategory's <select> element.
2. Make sure whatever options you're adding to the subcategory droplist are actually configured to exist in the Custom Fields plugin. For example, if you specify an option of "foo" when only "bar" and "baz" are configured in custom fields for the subcategory droplist, the value of "foo" will be ignored when you submit the page.