Posted at

【備忘録】HTMLでプルダウン連動させて且つテキストエリア表示したものをコピーする


テストコードを作成したので備忘録としてあげておく。

※ただの備忘録なのでインデントは考慮していないので適宜フォーマッターなどを使用して修正してください。

<html>

<head>
<meta charset="utf-8">
<script type="text/javascript">
msgtxt = new Array();
for (i = 0; i < 4; i++) {
msgtxt[i] = new Array();
}

msgtxt[1][1] = "a-1が選択されているときのメッセージ";
msgtxt[1][2] = "a-2が選択されているときのメッセージ";
msgtxt[1][3] = "a-3が選択されているときのメッセージ";
msgtxt[2][1] = "b-1が選択されているときのメッセージ";
msgtxt[2][2] = "b-2が選択されているときのメッセージ";
msgtxt[2][3] = "b-3が選択されているときのメッセージ";
msgtxt[3][1] = "c-1が選択されているときのメッセージ";
msgtxt[3][2] = "c-2が選択されているときのメッセージ";
msgtxt[3][3] = "c-3が選択されているときのメッセージ";

function selchg() {
sltd = document.f1.s1.selectedIndex;
if (sltd == "1") {
document.f1.s2.options[1].text = "a-1";
document.f1.s2.options[2].text = "a-2";
document.f1.s2.options[3].text = "a-3";
} else if (sltd == "2") {
document.f1.s2.options[1].text = "b-1";
document.f1.s2.options[2].text = "b-2";
document.f1.s2.options[3].text = "b-3";
} else if (sltd == "3") {
document.f1.s2.options[1].text = "c-1";
document.f1.s2.options[2].text = "c-2";
document.f1.s2.options[3].text = "c-3";
}
}

function txtchg() {
x = document.f1.s1.selectedIndex;
y = document.f1.s2.selectedIndex;
document.f1.t1.value = msgtxt[x][y];
}

function setCB() {
txt = document.f1.t1.value;
window.clipboardData.setData("text", txt);
}
</script>
</head>

<body>
グループ①
<form name="f1">
<select name="s1" onChange="selchg()">
<option>-
<option>a
<option>b
<option>c
</select>
<br>
<br>
    グループ②
<br>
<select name="s2" onChange="txtchg()">
<option>-
<option>a-1
<option>a-2
<option>a-3
</select>
<br>
<br>
    テキストエリア
<br>
<TEXTAREA name="t1" rows="4" cols="40"></TEXTAREA>
<br>
<input type="button" value="コピー" onclick="setCB()">
</form>

</body>

</html>