セレクトボックスと連動して、ボタンの中の文字を動的に変更したい

■やりたいこと
セレクトボックスと連動して、ボタンの中に記述されている文字列を変更したい。
このようなことは、可能なのでしょうか？

<select> <option value = "en-US" selected>English(USA)</option> <option value = "en-GB">English(UK)</option> <option value = "ja-JP">日本語</option> </select>

<button>ここの値を上記のselectボックスの値と連動して変化させたい</button>

■考えたこと
２つのセレクトボックスを使った、連動は可能だと認識しておりますが、
一方がセレクトボックスで、一方がボタンの場合にどうすればよいかわかりません。
ご教示ください。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことかな

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<script>
6</script>
7</head>
8<body>
9<select id="sel" onchange="selectChange();">
10<option value="en-US" selected>English(USA)</option>
11<option value="en-GB">English(UK)</option>
12<option value="ja-JP">日本語</option>
13</select>
14<button id="seltext">ここの値を上記のselectボックスの値と連動して変化させたい</button>
15</body>
16<script>
17function selectChange() {
18  var sel = document.getElementById('sel');
19  var text = '';
20  switch(sel[sel.selectedIndex].value) {
21    case "en-US":
22      text = 'Who are you?';
23      break;
24    case "en-GB":
25      text = 'Who are you en-GB?';
26      break;
27    case "ja-JP":
28      text = 'あなたは誰ですか?';
29      break;
30    default:
31      break;
32  }
33  document.getElementById('seltext').innerText = text;
34}
35document.body.onload = function() {
36  selectChange();
37};
38</script>
39</html>
40