Displaying a Field Based on Another Field Selection

[Eduardo Marques]

So, I'm using this page as reference: https://confluence.atlassian.com/display/JIRA044/Displaying+a+Field+Based+on+Another+Field+Selection

But I want to extend it a bit.

This is the scenario:

I want to create a custom field (Cascading select list) and allow the users to see a maximum of 3 of these custom fiels.

I have created the custom fields (Component 1, Component 2 and Component 3). Component 1 is displayed by default and required but Component 2 and Component 3 are only displayed if necessary.

If Component 1 has any option selected aside from "None", Component 2 is displayed and if Component 2 has any option selected aside from "None", Component 3 is displayed.

Component 1 - customfield_10231

Component 2 - customfield_10232

Component 3 - customfield_10233

Following the described procedure, I included this code in the description of the "Component 2" field and Component 1 and 2 fields work correctly:

<script type="text/javascript">
  field = document.getElementById('customfield_10231');
  if (field) {
   target = document.getElementById('customfield_10232').parentNode;
   // Show the target field if field isn't "None"
   if (field.value = 'None') target.style.display='none';
   field.onchange=function() {
    if (this.value != 'None') {
                     target.style.display = '';
                  } else {
              target.style.display='none';
    }
   }
  }
 </script>

The problem is when I add Component 3 to the procedure.

Using the code below, the Component 3 field is not displayed. I tried to play around with it but all I was able to do is to display Component 3 instead of Component 2 when selecting something in Component 1.

What should I do/add to the code to make it work?

Thank you for your help

<script type="text/javascript">
  field = document.getElementById('customfield_10232');
  if (field) {
   target = document.getElementById('customfield_10233').parentNode;
   // Show the target field if field isn't "None"
   if (field.value = 'None') target.style.display='none';
   field.onchange=function() {
    if (this.value != 'None') {
                     target.style.display = '';
                  } else {
              target.style.display='none';
    }
   }
  }
 </script>

[Eduardo Marques]

Anyone?