FAQ：選択された内容によって入力項目の色を変える
## 回答
「[スクリプト](/manual/table-management-script)」を使用します。
---
## 概要
記録テーブルを作成し、分類A、数値A、Bを有効にしたうえで、「[スクリプト](/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の枠線の色が青に変更されます。
分類Aで「B」を選択した場合は、数値Bの枠線の色が青に変更されます。
分類Aで「A」または「B」以外を選択した場合は数値A、数値Bの枠線の色が戻されます。
## 関連情報
<div id="ManualList"><ul><li><a href="/manual/table-management-script">テーブルの管理：スクリプト</a><span>2024/06/17 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
