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
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Published Monday in Jira Software

How large do you think Jira Software can grow?

Hi Atlassian Community! My name is Shana, and I’m on the Jira Software team. One of the many reasons this Community exists is to connect you to others on similar product journeys or with comparabl...

708 views 6 13
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