Client Script, to remove values from field depends on current value, is not working

[Kasia5]

Hi All, 

I have a Client Script which doesn't work as expect.

It should remove values in 'State' field depends on current chosen value, but currently when I open the INC and it is with state 'New' then I have all of the choices/values but I should only a few. Then when I choose for example 'In progress' then correct values are removed, but next when I decide (without save) to choose another value then the whole page is not working..

What is wrong in this onChange Client Script?

function onChange(control, oldValue, newValue, isLoading, isTemplate) {

    if (isLoading || newValue === '') {

        return;

    }

    //Add all states back into choice list

    g_form.addOption('state', '1', 'New', 1);

    g_form.addOption('state', '2', 'In Progress', 2);

    g_form.addOption('state', '3', 'On Hold', 3);

    g_form.addOption('state', '5', 'To be translated', 3);

    g_form.addOption('state', '6', 'Resolved', 6);

    g_form.addOption('state', '7', 'Closed', 7);

    g_form.addOption('state', '8', 'Canceled', 8);

    //Below if uncommented clears the entire list

    //g_form.clearOptions('state'); 

    if (newValue === '1') {

        g_form.removeOption('state', '5');

        g_form.removeOption('state', '6');

    }

    if (newValue === '2') {

        g_form.removeOption('state', '1');

        g_form.removeOption('state', '7');

    }

    if (newValue === '5') {

        g_form.removeOption('state', '1');

        g_form.removeOption('state', '7');

    }

    if (newValue === '6') {

        g_form.removeOption('state', '1');

    }

    if (newValue === '3') {

        g_form.removeOption('state', '1');

        g_form.removeOption('state', '7');

        g_form.removeOption('state', '8');

    }

    return;

}

Thanks in advance for help!

[Ankur Bawiskar]

@Kasia5 

It's better to clear the options and then add whichever you want as per your requirement

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
	if (isLoading || newValue === '') {
		return;
	}

	// you need to decide what to show when they clear the value
	
	//Below if uncommented clears the entire list
	g_form.clearOptions('state'); 

	if (newValue === '1') {
		// add options based on value 1
	}

	if (newValue === '2') {
		// add options based on value 2
	}

	if (newValue === '5') {
		// add options based on value 5
	}

	if (newValue === '6') {
		// add options based on value 6
	}

	if (newValue === '3') {
		// add options based on value 3
	}

}

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Kasia5]

I checked with your solution and now I have sth like:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}

//Add all states back into choice list
/* g_form.addOption('state', '1', 'New', 1);
g_form.addOption('state', '2', 'In Progress', 2);
g_form.addOption('state', '3', 'On Hold', 3);
g_form.addOption('state', '5', 'To be translated', 3);
g_form.addOption('state', '6', 'Resolved', 6);
g_form.addOption('state', '7', 'Closed', 7);
g_form.addOption('state', '8', 'Canceled', 8); */

//Below if uncommented clears the entire list
g_form.clearOptions('state');

if (newValue === '1') {
g_form.addOption('state', '1');
g_form.addOption('state', '2');
g_form.addOption('state', '3');
g_form.addOption('state', '7');
g_form.addOption('state', '8');
}

if (newValue === '2') {
g_form.addOption('state', '2');
g_form.addOption('state', '3');
g_form.addOption('state', '5');
g_form.addOption('state', '6');
g_form.addOption('state', '8');
}
}

but currently when I want to change the state, the whole page is not working

[Vengateshwaran]

Hi @Kasia5 ,

Better you can achieve this using state models. Refer this link - https://docs.servicenow.com/en-US/bundle/vancouver-platform-administration/page/administer/state-mod...