Javascript in JIRA : enable/disable a listbox related to the contents of another listbox

[Christophe Leite]

Hi all,

On an issue screen, I've got two listbox fields list1 and list2. I wonder if it was possible to choose a value in list1. And list2 will be enabled or disabled, according to the value selected in list1.

In my above example, list1 contains both "Yes" and "No"

If I choose "Yes" list2 will be enabled, otherwise, it will be disabled. Is this possible to do that on a JIRA issue screen ?

Thanks a lot,

Any help greatly appreciated.

[RambanamP · Accepted solution]

try with this script by changing custom field ids as per your instance

<script type="text/javascript">  
jQuery(document).ready(function($) {    
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {    
    callHideShowFunction();
});
callHideShowFunction();
function  callHideShowFunction(){
        showHideSelectList();
        $("#customfield_11704").closest('div.field-group').hide();  
        $('#customfield_11911').change(function() { 
            showHideSelectList();
        });
}
    function showHideSelectList(){          
        var emergencyImpl=$.trim($("#customfield_11911 :selected").text())
     
        if( emergencyImpl == "Yes" ){ 
            $("#customfield_11704").closest('div.field-group').show();
        }else {
            $('#customfield_11704').val('');
            $("#customfield_11704").closest('div.field-group').hide();
        }
    }
});
</script>

i think you can convert list1 to radio button because it have only two values, if you want use radio button then you can have solutiion here

https://answers.atlassian.com/questions/158035/need-to-hide-show-a-textfield-based-on-the-value-of-the-check-box-using-javascript

[Christophe Leite]

Well, it does not matter ! Do not annoy you with that, it is already very nice that you help me! : -)

Thanks a lot... I will find another way ;-)

[Christophe Leite]

So, I create an issue. I have an alert emergencyImpl:None. I click on OK and then have an other alert emergencyImpl value is No. I click OK. Another time emergencyImpl:None. And then emergencyImpl value is No.

I choose Yes in my list1, I have an alert : emergencyImpl : Yes ... and then an other : emergencyImpl value is Yes, and then emergencyImpl : Yes, and then emergencyImpl value is Yes

I choose No in my list2, I have an alert : emergencyImpl : No ... and then emergencyImpl value is No .... and then emergencyImpl : No and then emergencyImpl value is No

[RambanamP]

this is weired!! i am not sure why it is triggering onchange event for list 2 field :(

[RambanamP]

your code seems correct except minor change, try with this

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) { 
callHideShowFunction();
});
callHideShowFunction();
function callHideShowFunction(){
		showHideSelectList();	
	$('#customfield_10903').change(function() { 
		showHideSelectList();
	});
}
function showHideSelectList(){ 
	var emergencyImpl=$.trim($("#customfield_10903 :selected").text());
	alert("emergencyImpl: "+emergencyImpl);
	$("#customfield_10902").closest('div.field-group').hide(); 
	if( emergencyImpl == "Yes" ){ 
		alert("emergencyImpl value is Yes");
		$("#customfield_10902").closest('div.field-group').show();
	}else {
		alert("emergencyImpl value is No");
		$('#customfield_10902').val('');
		$("#customfield_10902").closest('div.field-group').hide();
	}
}
});
</script>

add the above script in list2 field description

[Christophe Leite]

it does not work... result is similar. On the issue modification screen I cannot modify the value of list2 :-(

[RambanamP]

i have updated my answer with alerts so try with that and let me know what alerts are popup!!

[RambanamP]

is it worked? what was the problem?

[Christophe Leite]

Thanks, you're great ! :-) I did not know a lot about javascript language unfortunately :-(

Here is my code. I follow your advice (I prefer to continue with listbox instead of radio button), but it still does not work on modification screen...

<script type="text/javascript">
jQuery(document).ready(function($) {
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {
callHideShowFunction();
});
callHideShowFunction();
function callHideShowFunction(){
showHideSelectList();
$("#customfield_10902").closest('div.field-group').hide();
$('#customfield_10903').change(function() {
showHideSelectList();
});
}
function showHideSelectList(){
var emergencyImpl=$.trim($("#customfield_10903 :selected").text())
if( emergencyImpl == "Yes" ){
$("#customfield_10902").closest('div.field-group').show();
}else {
$('#customfield_10902').val('');
$("#customfield_10902").closest('div.field-group').hide();
}
}
});
</script>

[RambanamP]

which one is list1 and list2 field ?

is list1 is customfield_10902 and list 2 is customfield_10903, is it correct or i am wrong?

[Christophe Leite]

list1 is 10903

list2 is 10902

[Christophe Leite]

Rambanam, first of all, thank you very much for your quick answer.

Then, I've tried to use your code. But I met a problem when I try to modify my issue : first field list1 is filled with the value I've selected ("Yes"), the other one, list2, too. But when I try to modify list2, it erases its value and list2 becomes invisible ...what can I do to solve this problem ? in the issue modification screen, I'v tried to modify list1 thinking that list2 appears with correct value, but list2 is still not visible...

[RambanamP]

can you share your custom field id's/script so i can debug it!!