Show/Hide form selections based on drop down selection possible?

Jan 22, 2014 at 6:59 PM
I have a single library to upload documents to. All the documents need a Department, Group, Category and Type field selected. However, based on the Category, there are other fields that need to be filled out (or omitted). I would like for those fields that are to be omitted to not show up as a drop down.

Using SPServices, there are lists setup so when you select a department, only those groups associated with that department show up. The same is setup for category's and type's.

Example library:
Department | Group | Category      | Type     | Month | Year | Owner
Dep 1      | Grp 1 | Report        | Report 1 | Jan   | 2013 |
Dep 1      | Grp 1 | Report        | Report 2 | Jan   | 2013 |
Dep 2      | Grp 3 | Report        | Report 1 | Feb   | 2013 |
Dep 2      | Grp 3 | Report        | Report 2 | Feb   | 2013 |
Dep 1      | Grp 2 | Documentation | Doc 1    |       |      | Columbus
Dep 1      | Grp 2 | Documentation | Doc 2    |       |      | Genghis
Dep 1      | Grp 2 | Documentation | Doc 2    |       |      | Sheldon
Scenario
Select department and associating group then select Report, Report 1, and be prompted to select a month and year. Owner will be omitted or hidden from selection view.

Select department and associating group then select documentation and doc 1, and be prompted to select an owner. Month and Year should be omitted or hidden from selection view.

I would appreciate any direction or advice on how to make this happen?
Jan 23, 2014 at 3:04 PM
I was able to achieve my request through the following code.

If there is a way to improve the code, please let me know.

Thanks!
//Variables
//FieldNameToHideShow equates to the field you don’t want visible unless a certain option is selected from another drop down
//FieldNameToSelect is the field when changed will determine whether to show or hide the FieldNameToHide

//Syntax to identify the field row to hide
//$('h3:contains("FieldNameToHideShow")').closest('tr').hide();
//$('h3:contains("FieldNameToHideShow")').closest('tr').show();

//Syntax to hide/show field row based on another fields selection
//$("select[title='FieldNameToSelect']").click(function() {
//  if ($("select[title='FieldNameToSelect'] option:selected").text()=="CriteriaGoesHere"){
//    //Hide/Show
//  } else { 
//    //Hide/Show
//  } 
//});

So for my example the code would look like

//Initialize - Hide all non-required data entries
$('h3:contains("Month")').closest('tr').hide();
$('h3:contains("Year")').closest('tr').hide();
$('h3:contains("Owner")').closest('tr').hide();

//Handle Category drop down
$("select[title='Category']").click(function() {
  //Handle report selection
  if ($("select[title='Category'] option:selected").text()=="Report"){
    $('h3:contains("Month")').closest('tr').show();
    $('h3:contains("Year")').closest('tr').show();
    $('h3:contains("Owner")').closest('tr').hide();
  } else { 
    //Default to null/none/blank
    $("select[title='Month']").get(0).selectedIndex = 0
    $("select[title='Year']").get(0).selectedIndex = 0
    //Hide
    $('h3:contains("Month")').closest('tr').hide();
    $('h3:contains("Year")').closest('tr').hide();
  } 
  //Handle documentation selection
  if ($("select[title='Category'] option:selected").text()=="Documentation"){
    $('h3:contains("Month")').closest('tr').hide();
    $('h3:contains("Year")').closest('tr').hide();
    $('h3:contains("Owner")').closest('tr').show();
  } else { 
    //Default to null/none/blank
    $("select[title='Owner']").get(0).selectedIndex = 0
    //Hide
    $('h3:contains("Owner")').closest('tr').hide();
  } 
});