FAQ:選択された内容によって入力項目の色を変える
## 回答
[スクリプト](/ja/manual/table-management-script)を使用します。
---
## 概要
記録テーブルを作成し、分類A、数値A、Bを有効にしたうえで、[スクリプト](/ja/manual/table-management-script)を新規作成し、以下のスクリプトを記載してください。
出力先には「新規作成」と「編集」をチェックして更新します。
以下は分類Aの選択により数値A、数値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':
// 数値Aに対する処理
$p.getControl('NumA').css(myCssBlue);
// 数値Bに対する処理
$p.getControl('NumB').css(myCssDefault);
break;
case 'B':
// 数値Bに対する処理
$p.getControl('NumB').css(myCssBlue);
// 数値Aに対する処理
$p.getControl('NumA').css(myCssDefault);
break;
default:
// 数値Aに対する処理
$p.getControl('NumA').css(myCssDefault);
// 数値Bに対する処理
$p.getControl('NumB').css(myCssDefault);
break;
}
});
```
分類Aで「A」を選択した場合は、数値Aの枠線の色が青に変更されます。
![image](https://pleasanter.org/binaries/77abc85fcb004ac4a277a65799f39ba2)
分類Aで「B」を選択した場合は、数値Bの枠線の色が青に変更されます。
![image](https://pleasanter.org/binaries/d300108703e64bb4999c31a5b233dd2b)
分類Aで「A」または「B」以外を選択した場合は数値A、数値Bの枠線の色が戻されます。
![image](https://pleasanter.org/binaries/cb031599e1dc4075abc9d5747ceeb2f2)
## 関連情報
<div id="ManualList"><ul><li><a href="/ja/manual/table-management-script">テーブルの管理:スクリプト</a><span>2024/10/08 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />