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
Posted Sep 18, 2018 in Jira

What modern development practices are at the heart of how your team delivers software?

Hey Community mates! Claire here from the Software Product Marketing team. We all know software development changes rapidly, and it's often tough to keep up. But from our research, we've found the h...

22,002 views 2 7
Join discussion

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