FAQ: Change the color of input fields depending on the selected content
## Answer
Use "[Script](/en/manual/table-management-script)".
---
## Overview
Create a record table, enable classification A, values A and B, then create a new "[Script](/en/manual/table-management-script)" and write the following script.
Check "Create new" and "Edit" for the output destination to update.
![image](https://pleasanter.org/binaries/bdb79b9c08834785831aaf2c050937e6)
![image](https://pleasanter.org/binaries/231fa970d19049c68ddc48b5e26ccc84)
![image](https://pleasanter.org/binaries/485c3c53b4714021af29e870ce214f92)
If A is selected in classification A, change the border of value A to blue. If B is selected, change the border of value B to blue. This is a sample script that returns the display of values A and B to values other than A and B.
##### JavaScript
```
$(document).on('change', '#' + $p.getControl('ClassA')[0].id, function() {
const myClassA = $p.getControl('ClassA').val();
const myCssBlue = {'borderColor': 'blue', 'background': '#f0f8ff'};
const myCssDefault = {'borderColor': '#c0c0c0', 'background': 'white'};
switch(myClassA) {
case 'A':
// Processing for number A
$p.getControl('NumA').css(myCssBlue);
// Processing for number B
$p.getControl('NumB').css(myCssDefault);
break;
case 'B':
// Processing for number B
$p.getControl('NumB').css(myCssBlue);
// Processing for number A
$p.getControl('NumA').css(myCssDefault);
break;
default:
// Processing for number A
$p.getControl('NumA').css(myCssDefault);
// Processing for number B
$p.getControl('NumB').css(myCssDefault);
break;
}
});
```
## Related Information
<div id="ManualList"><ul><li><a href="/en/manual/table-management-script">Table Management: Script</a><span>08.13.2024 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />