プルダウン未選択時の文字表示切替とラジオボタン活性化の方法

プログラミング初心者です。下記のソースコードを用いて、表示されたプルダウンでの選択結果により、文字の表示切替とラジオボタンの活性化/非活性化切替を行おうとしています。

文字の表示切替とラジオボタンの活性化/非活性化切替は実現できていますが、プルダウンが未選択のとき、表示切替と活性化/非活性化の方法がわからず困っています。

【質問】
プルダウンが未選択「選択してください」のときに、「いちご」選択時と同様の結果を表示させる方法をご教授頂けないでしょうか？ソースコードもご教授頂けると幸いです。

※また、表示切替とラジオボタン活性化/非活性の方法についてよりスマートな方法がありましたら、ご教授お願い致します。

何卒宜しくお願い致します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>くだもの</title>
<script type="text/javascript">
	/*ラジオボタンの活性化と非活性化*/
	function labelChange1(){
		if(document.getElementById('selectList')){
			id = document.getElementById('selectList').value;
			/*みかん選択時*/
			if(id=='list1'){
				document.getElementById('radioAbl').style.display="none";
				document.getElementById('radioDsbl').style.display="";
			/*その他選択時*/
			}else if(id=='list0'||'list2'){
				document.getElementById('radioAbl').style.display="";
				document.getElementById('radioDsbl').style.display="none";
			}
		}
	}
	/*表示切替*/
	function labelChange2(){
		if(document.getElementById('selectList')){
			id = document.getElementById('selectList').value;
			/*りんご選択時*/
			if(id=='list0'){
				document.getElementById('American').style.display="none";
				document.getElementById('British').style.display="";
			/*その他選択時*/
			}else if(id=='list1'||'list2'){
				document.getElementById('American').style.display="";
				document.getElementById('British').style.display="none";
			}
		}
	}
</script>
</head>
<body>
	<form method="POST">
		<table class="table-css" cellspacing="0" cellpadding="2">
			<tr>
				<td  class="td-css" width="250" valign="middle" align="center" nowrap>
					プルダウン
				</td>
				<td class="td-css" width="460" valign="middle" align="left">
				<!-- くだものリスト -->
					<select id="selectList" name="dataList" style="width:100" onchange="labelChange1(); labelChange2()">
						<option disabled selected>選択してください</option>
						<option value="list0">りんご</option>
						<option value="list1">みかん</option>
						<option value="list2">いちご</option>
					</select>
				</td>
			</tr>
		</table>
	
		<table class="table-css" cellspacing="0" cellpadding="2">
			<tr>
				<!-- 国籍選択 -->
				<td rowspan="2" class="td-css" width="200" valign="middle" align="center" nowrap>
					国籍
				</td>
				<!-- 国籍ラジオボタン -->
				<td class="td-css-br" width="50" valign="middle" align="center">
					<input type="radio" name="radio1" checked>
				</td>
				<td class="td-css-blr" width="200" valign="middle" align="left" nowrap>
					<font size="2">日本人</font>
				</td>
				<td class="td-css-bl" width="300" valign="middle" align="left">
				</td>
			</tr>
			<tr>
				<!-- ラジオボタン活性化 -->
				<td id="radioAbl" class="td-css-tr" width="50" valign="middle" align="center">
					<input type="radio" name="radio1" >
				</td>
				<!-- ラジオボタン非活性化 -->
				<td id="radioDsbl" class="td-css-br" width="50" valign="middle" align="center">
					<input type="radio" name="radio1" disabled>
				</td>
				<td class="td-css-tlr" width="200" valign="middle" align="left" nowrap>
					<!-- 表示切替 -->
					<div id="American">
						<font size="2">
						アメリカ人
						</font>
					</div>
					<div id="British">
						<font size="2">
						イギリス人
						</font>
					</div>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

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

回答3件

選択してくださいの時に～よりは、デフォルトの選択値をいちごにするのはダメですか？

HTML
1<select name="selectList" id="selectList" onchange="labelChange()">
2  <option value="list0">りんご</option>
3  <option value="list1">みかん</option>
4  <option value="list2" selected>いちご</option>
5</select>
6

投稿2016/02/06 23:02

yamato_hikawa

総合スコア2092

GranCD

2016/02/07 03:44

ご回答頂きましてありがとうございます。デフォルトで「選択してください」を表示させたいです。初期状態時にプルダウンには「選択してください」を表示させ、「選択してください」は選択不可にしたいためです。説明不足で申し訳ありません。

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

途中で飽きてきちゃったんでかなりいい加減ですが、こんなのがやりたいことなのかな、というのを書いてみました。
くだものを選んだときにどの国籍を表示してどの国籍を選択可能にするか、をひとつの連想配列に書くようにしてみました。でもって、初期化もくだものを選択したときと同じ関数が呼ばれるようにしてみました。

jQuery 使った方がいいのに、と思って jQuery を使ったコードを書こうかな、と思っていたのですが、暇がなくなったのでご要望があれば後ほど。

html
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3  <head>
4    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5    <title>くだもの</title>
6    <style>
7      table.table-css {
8        cellspacing: 0;
9        cellpadding: 2;
10      }
11      table.table-css td {
12        valign: middle;
13      }
14      ul.nations {
15        list-style: none;
16      }
17      ul.nations ul {
18        list-style: none;
19      }
20      ul.nations span {
21        font-size: 120%;
22      }
23    </style>
24  </head>
25  <body>
26    <form method="POST">
27      <table class="table-css">
28	<tr>
29	  <td  class="td-css" width="250" align="center" nowrap>
30	    プルダウン
31	  </td>
32	  <td class="td-css" width="460" align="left">
33	    <!-- くだものリスト -->
34	    <select id="fruitList" name="dataList" style="width:100" onchange="stuff.change();">
35	      <option disabled selected value="nothing">選択してください</option>
36	      <option value="apple">りんご</option>
37	      <option value="orange">みかん</option>
38	      <option value="strawberry">いちご</option>
39	    </select>
40	  </td>
41	</tr>
42      </table>
43
44      <ul class="nations">
45	<li>国籍</li>
46	<ul id="nationList">
47	  <li><input type="radio" name="radio1" value="japanese"><span>日本人</span></li>
48	  <li><input type="radio" name="radio1" value="american"><span>アメリカ人</span></li>
49	  <li><input type="radio" name="radio1" value="british"><span>イギリス人</span></li>
50	</ul>
51      </ul>
52    </form>
53    <script type="text/javascript">
54      var stuff = {
55        spec: {
56          fruits: {
57            nothing: {
58              japanese: { visible: true, enabled: true },
59              american: { visible: true },
60            }, 
61            apple: {
62              japanese: { visible: true, enabled: true },
63              british: { visible: true },
64            }, 
65            orange: {
66              japanese: { visible: true, enabled: true },
67              american: { visible: true, enabled: true },
68              british: { visible: true },
69            }, 
70            strawberry: {
71              japanese: { visible: true, enabled: true },
72              american: { visible: true, enabled: true },
73              british: { visible: true, enabled: true },
74            }, 
75          },
76        },
77        start: function() {
78          var stuff = this;
79          stuff.fruitList = document.getElementById('fruitList');
80          stuff.nationItems = document.getElementById('nationList').children;
81          this.change();
82        },
83        change: function() {
84          var stuff = this;
85          var fruit = stuff.fruitList.value;
86          console.log('fruit', fruit);
87          var spec = stuff.spec.fruits[fruit];
88          if (typeof spec == 'undefined') return false;
89          console.log('spec', spec);
90          for (var i = 0, n = stuff.nationItems.length; i < n; i++) {
91            var item = stuff.nationItems[i];
92            var radio = item.children[0];
93            var name = radio.value;
94            if (spec[name] && spec[name].visible) { 
95              item.style.display = '';
96            } else {
97              item.style.display = 'none';
98            }
99            if (spec[name] && spec[name].enabled) { 
100              radio.disabled = '';
101            } else {
102              radio.disabled = 'disaabled';
103            }
104          }
105        }
106      };
107      document.addEventListener('DOMContentLoaded', function() {
108        stuff.init();
109      });
110    </script>
111  </body>
112</html>

投稿2016/02/06 21:28

unau

総合スコア2468

GranCD

2016/02/07 03:42

ご回答頂きましてありがとうございます。 javascriptの連想配列でのアプローチもあるのですね！また、初期状態時の方法もご教授して頂きましてありがとうございます。勉強になりました。

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

ベストアンサー

余計なclassやインラインのstyleは削除しました。
下記のような感じでしょうか。

ちなみに、やりたいことというかコードの意図がよくわかりませんが、

・input type="radio"にvalueが設定されていないので、このラジオボタンは選択されていてもなんの情報ももっていません。
・表示/非表示と活性化/非活性化は意味が違います
非活性化とは、ご自身でもコードにかかれているように、disabledを使って、クリックできなくすることです
・このケースだと、if-elseで条件分岐をするよりも、switch-caseで分岐したほうが、条件ごとの処理をまとめてかけるからスッキリするのではないでしょうか？

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <script>
7        function labelChange() {
8            // プルダウンのvalueを取得する
9            var value = document.getElementById("selectList").value;
10            // console.log(value);
11
12            var american = document.getElementById("american");
13            var britsh = document.getElementById("british");
14
15            switch (value) {
16                case "list0": // りんごの場合
17                    // アメリカ人を非表示にして、イギリス人を表示
18                    american.style.display = "none";
19                    britsh.style.display = "";
20                    // イギリス人の選択肢を活性化
21                    document.getElementById("radio_british").disabled = false;
22                    break;
23                case "list1": // みかんの場合
24                    // アメリカ人を表示にして、イギリス人を非表示
25                    american.style.display = "";
26                    britsh.style.display = "none";
27                    // アメリカ人の選択肢を非活性化
28                    document.getElementById("radio_american").disabled = true;
29                    break;
30                case "選択してください: // 選択してください、にはvalueが設定されていない
31                case "list2": // いちごの場合
32                    // アメリカ人を表示にして、イギリス人を非表示
33                    american.style.display = "";
34                    britsh.style.display = "none";
35                    // アメリカ人の選択肢を活性化
36                    document.getElementById("radio_american").disabled = false;
37                    break;
38            }
39        }
40    </script>
41</head>
42<body>
43<form action="/" method="post">
44    <table>
45        <!-- プルダウン -->
46        <tr>
47            <td>くだもの</td>
48            <td>
49                <select name="selectList" id="selectList" onchange="labelChange()">
50                    <option disabled selected>選択してください</option>
51                    <option value="list0">りんご</option>
52                    <option value="list1">みかん</option>
53                    <option value="list2">いちご</option>
54                </select>
55            </td>
56        </tr>
57        <tr>
58            <td>国籍</td>
59            <td>
60                <div id="japanese">
61                    <input type="radio" name="radio1" id="radio_japanese" value="日本人">
62                    <label for="radio_japanese" checked>日本人</label>
63                </div>
64                <div id="american">
65                    <input type="radio" name="radio1" id="radio_american" value="アメリカ人">
66                    <label for="radio_american">アメリカ人</label>
67                </div>
68                <div id="british" style="display:none;">
69                    <input type="radio" name="radio1" id="radio_british" value="イギリス人" disabled>
70                    <label for="radio_british">イギリス人</label>
71                </div>
72            </td>
73            </td>
74        </tr>
75    </table>
76</form>
77</body>
78</html>

投稿2016/02/06 15:07

編集2016/02/06 21:09

yng13

総合スコア215

GranCD

2016/02/06 15:41

ご回答頂きましてありがとうございます。今回の場合ですと、確かにswitch-caseを用いた方が明らかにすっきりしています。参考にさせて頂きます。ご回答頂いたコードですと、プルダウンが未選択状態のとき、ラジオボタンが３つ(日本人、アメリカ人、イギリス人)が表示されています。質問の繰り返しとなり申し訳ありませんが、プルダウンが未選択状態のときに、「いちご」を選択時と同様の結果(ラジオボタンが2つ。日本人とアメリカ人のみ)を表示する方法をご教授頂けないでしょうか？

yng13

2016/02/06 21:06 編集

>プルダウンが未選択状態のときに、「いちご」を選択時と同様の結果(ラジオボタンが2つ。日本人とアメリカ人のみ)を表示する方法あ、すみません。こちらを忘れていました。一つ確認なのですが、「選択してください」のoptionにはdisabledがついていますね。これは、一度プルダウンを変更すると、二度と「選択してください」を選べないことになりますが、それは意図してることですか？いずれにせよ、初期状態(=未選択時)では最初からイギリス人を表示しないようにすればよいかと。 <div id="british" style="display:none;"> それと、いちごと同じ選択肢の状態ということでしたら、 case "選択してください": // 選択してください、にはvalueがないので case "list2": // いちごの場合 // アメリカ人を表示にして、イギリス人を非表示 american.style.display = ""; britsh.style.display = "none"; // アメリカ人の選択肢を活性化 document.getElementById("radio_american").disabled = false; break; このように続けてかけば、「いちご」と「選択してください」の時の動作は同じになります。ただし、先に書いたとおり、「選択してください」にはdisabledが付いているのでこのままだと選べない状態です。

yng13

2016/02/06 21:08

コメント欄だとコードの色付けできないんですね。元の回答のコードを修正しておきますね。

GranCD

2016/02/07 03:41

ご回答頂きましてありがとうございます。実現したかったのはまさにこの内容です！参考にさせて頂きます。＞一つ確認なのですが、「選択してください」のoptionにはdisabledがついていますね。これは、一度プルダウンを変更すると、二度と「選択してください」を選べないことになりますが、それは意図してることですか？ ⇒意図して「選択してください」にdisabledを付けています。初期状態時にプルダウンには「選択してください」を表示させる、かつ「選択してください」は二度と選べないようにしたいため、disabledを付けています。説明不足で申し訳ありませんでした。

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

あなたの回答