JavaScript to show single or multiple fields on selection of values in the multilist dropdown

[pooja chourasia]

Need Help!!

We have four singe list fields - BRS Types, CUPPS Types, CUSS Types, FIDS Types

one multilist field - components

Below is the script - 

<script type="text/javascript">
Components = document.getElementById('customfield_15153');
if (Components) {
target = document.getElementById('customfield_15078');
target1 = document.getElementById('customfield_15080');
target2 = document.getElementById('customfield_15082');
target3 = document.getElementById('customfield_15081');

if (Components.value != 15135)
{
target.style.display='none';
AJS.$('label[for="customfield_15078"]').hide();
}
if (Components.value != 15136)
{
target1.style.display='none';
AJS.$('label[for="customfield_15080"]').hide();
}
if (Components.value != 15137)
{
target2.style.display='none';
AJS.$('label[for="customfield_15082"]').hide();
}
if (Components.value != 15139)
{
target3.style.display='none';
AJS.$('label[for="customfield_15081"]').hide();
}

Components.onchange=function() {

if (this.value == 15135) {
target.style.display = '';
AJS.$('label[for="customfield_15078"]').show();
target1.style.display='none';
AJS.$('label[for="customfield_15080"]').hide();
target2.style.display='none';
AJS.$('label[for="customfield_15082"]').hide();
target3.style.display='none';
AJS.$('label[for="customfield_15081"]').hide();

}

else if (this.value == 15136)
{
target1.style.display='';
AJS.$('label[for="customfield_15080"]').show();
target.style.display='none';
AJS.$('label[for="customfield_15078"]').hide();
target2.style.display='none';
AJS.$('label[for="customfield_15082"]').hide();
target3.style.display='none';
AJS.$('label[for="customfield_15081"]').hide();
}

else if (this.value == 15137)
{
target2.style.display='';
AJS.$('label[for="customfield_15082"]').show();
target.style.display='none';
AJS.$('label[for="customfield_15078"]').hide();
target1.style.display='none';
AJS.$('label[for="customfield_15080"]').hide();
target3.style.display='none';
AJS.$('label[for="customfield_15081"]').hide();

}

else if (this.value == 15139)
{
target3.style.display='';
AJS.$('label[for="customfield_15081"]').show();
target.style.display='none';
AJS.$('label[for="customfield_15078"]').hide();
target1.style.display='none';
AJS.$('label[for="customfield_15080"]').hide();
target2.style.display='none';
AJS.$('label[for="customfield_15082"]').hide();

}

else if (this.value == 15135 && this.value == 15136) {
target.style.display = '';
AJS.$('label[for="customfield_15078"]').show();
target1.style.display='';
AJS.$('label[for="customfield_15080"]').show();
target2.style.display='none';
AJS.$('label[for="customfield_15082"]').hide();
target3.style.display='none';
AJS.$('label[for="customfield_15081"]').hide();
}

else if (this.value == 15135 && this.value == 15137) {
target.style.display = '';
AJS.$('label[for="customfield_15078"]').show();
target2.style.display='';
AJS.$('label[for="customfield_15082"]').show();
target3.style.display='none';
AJS.$('label[for="customfield_15081"]').hide();
target1.style.display='none';
AJS.$('label[for="customfield_15080"]').hide();

}

else if (this.value == 15135 && this.value == 15139) {
target.style.display = '';
AJS.$('label[for="customfield_15078"]').show();
target3.style.display='';
AJS.$('label[for="customfield_15081"]').show();
target1.style.display='none';
AJS.$('label[for="customfield_15080"]').hide();
target2.style.display='none';
AJS.$('label[for="customfield_15082"]').hide();

}

else if (this.value == 15136 && this.value == 15137) {
target1.style.display='';
AJS.$('label[for="customfield_15080"]').show();
target2.style.display='';
AJS.$('label[for="customfield_15082"]').show();
target.style.display='none';
AJS.$('label[for="customfield_15078"]').hide();
target3.style.display='none';
AJS.$('label[for="customfield_15081"]').hide();
}

else if (this.value == 15136 && this.value == 15139) {
target1.style.display='';
AJS.$('label[for="customfield_15080"]').show();
target.style.display='none';
AJS.$('label[for="customfield_15078"]').hide();
target3.style.display='';
AJS.$('label[for="customfield_15081"]').show();
target2.style.display='none';
AJS.$('label[for="customfield_15082"]').hide();
}

else if (this.value == 15137 && this.value == 15139) {
target2.style.display='';
AJS.$('label[for="customfield_15082"]').show();
target3.style.display='';
AJS.$('label[for="customfield_15081"]').show();
target.style.display='none';
AJS.$('label[for="customfield_15078"]').hide();
target1.style.display='none';
AJS.$('label[for="customfield_15080"]').hide();

}

}
}
</script>

Error -  selection is not working properly, showing fields in the wrong sequence.

Please Suggest.

Thanks in Advance!!

[Nic Brough -Adaptavist-]

This script has nothing about the order of fields, so it's the wrong place to look.  The order is done on the screen definition.

[pooja chourasia]

Hello Nic,

Thanks for the quick response.

Apologies, issue is that it is not showing fields as I select values in the multilist dropdown.

when I select single value, it works fine. However for multiple selection, it shows same two fields even after choosing the different values.

Please suggest.

[Nic Brough -Adaptavist-]

Your equivalences are wrong.  When a field contains "X", then "if it = X" works, but if a field contains "X, Y" then it "if it = X" is false because it doesn't just contain X.

You need to ask "if it has X in the values", not "is it X"

[pooja chourasia]

Understood the logic, 

Could you please suggest the javascript code to implement the above logic.

How can we implement In operator on event change? in the above script. Please suggest.

[Nic Brough -Adaptavist-]

I don't know enough javascript to tell you.  (I don't bother with javascript because it's usually a pointless thing to do in Jira, it's something I tend to strip out when asked to make Jira work properly, and always recommend not doing)

[Danyal Iqbal]

var string = "foo",    substring = "oo";
string.indexOf(substring) !== -1;

String.prototype.indexOf returns the position of the string in the other string. If not found, it will return -1.

or write a small contains functions e.g

function contains(array, element) {
    return jQuery.inArray(element, array) > -1;
}

[Danyal Iqbal]

+1 for-- I don't bother with javascript because it's usually a pointless thing to do in Jira, it's something I tend to strip out when asked to make Jira work properly, and always recommend not doing.

js is sneaky.