Displaying a Field Based on Another Field Selection

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>

1 answer

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Jan 08, 2019 in Jira

How to Jira for designers

I’m a designer on the Jira team. For a long time, I’ve fielded questions from other designers about how they should be using Jira Software with their design team. I’ve also heard feedback from other ...

1,125 views 4 9
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you