以前、こちらへ以下の内容で質問し、すばらしい回答を得たのですが、これに付け加え、セレクトメニューの最初に『選んでください。』などと表示し

なにも選択しなかった場合に『何か選択してください。』などの小窓が表示されるようにしたいです。よろしくお願いします。

【過去の質問】
ホームページの検索機能でセレクトメニューを3つ用いた検索フォーム設置したいと思っております。だれかご鞭撻ください。
例えばフォームAに2つの選択肢。フォームBに5つの選択肢、フォームCに4つの選択肢を与えフォームABCでそれぞれ選択した条件により特定のページを表示する。機能を設置したいとおもっております。
宜しくお願いします。

回答の条件
  • 1人2回まで
  • 登録:2006/08/20 12:04:12
  • 終了:2006/08/27 12:05:03

回答(2件)

id:yetanother No.1

yetanother回答回数15ベストアンサー獲得回数12006/08/20 21:28:11

ポイント35pt

http://www.ueda.info.waseda.ac.jp/~gaku/js/

URLはほとんどダミーです。

以下のような処理を呼び出せばよいのではないでしょうか?

セレクトメニューのIDを"select1"として。

function onButtonClick()

{

var selMenu1 = document.getElementById("select1");

var selMenu1Val = selMenu1.value;

if((selMenu1Val == "選んでください。") || (selMenu1Val == "")) {

alert("何か選択してください。")

} else {

/* 正しい選択肢が選択された場合の処理 */

}

}

id:quait

ご連絡ありがとうございます。

以前の回答に付け加えいろいろ試してみましたが、私の知識ではまったく手に負えません。

以下のソースのどの部分に記載すればよろしいのでしょうか?

<html>

<head>

<script type="text/javascript"></p> <p>var url_list = new Array(</p> <p> new Array( //selectA-1</p> <p> new Array( //selectB-1</p> <p> "page1-1-1.html", //selectC-1</p> <p> "page1-1-2.html", //selectC-2</p> <p> "page1-1-3.html", //selectC-3</p> <p> "page1-1-4.html" //selectC-4</p> <p> ),</p> <p> new Array( //selectB-2</p> <p> "page1-2-1.html", //selectC-1</p> <p> "page1-2-2.html", //selectC-2</p> <p> "page1-2-3.html", //selectC-3</p> <p> "page1-2-4.html" //selectC-4</p> <p> ),</p> <p> new Array( //selectB-3</p> <p> "page1-3-1.html", //selectC-1</p> <p> "page1-3-2.html", //selectC-2</p> <p> "page1-3-3.html", //selectC-3</p> <p> "page1-3-4.html" //selectC-4</p> <p> ),</p> <p> new Array( //selectB-4</p> <p> "page1-4-1.html", //selectC-1</p> <p> "page1-4-2.html", //selectC-2</p> <p> "page1-4-3.html", //selectC-3</p> <p> "page1-4-4.html" //selectC-4</p> <p> ),</p> <p> new Array( //selectB-5</p> <p> "page1-5-1.html", //selectC-1</p> <p> "page1-5-2.html", //selectC-2</p> <p> "page1-5-3.html", //selectC-3</p> <p> "page1-5-4.html" //selectC-4</p> <p> )</p> <p> ),</p> <p> new Array( //selectA-2</p> <p> new Array( //selectB-1</p> <p> "page2-1-1.html", //selectC-1</p> <p> "page2-1-2.html", //selectC-2</p> <p> "page2-1-3.html", //selectC-3</p> <p> "page2-1-4.html" //selectC-4</p> <p> ),</p> <p> new Array( //selectB-2</p> <p> "page2-2-1.html", //selectC-1</p> <p> "page2-2-2.html", //selectC-2</p> <p> "page2-2-3.html", //selectC-3</p> <p> "page2-2-4.html" //selectC-4</p> <p> ),</p> <p> new Array( //selectB-3</p> <p> "page3-3-1.html", //selectC-1</p> <p> "page3-3-2.html", //selectC-2</p> <p> "page3-3-3.html", //selectC-3</p> <p> "page3-3-4.html" //selectC-4</p> <p> ),</p> <p> new Array( //selectB-4</p> <p> "page4-4-1.html", //selectC-1</p> <p> "page4-4-2.html", //selectC-2</p> <p> "page4-4-3.html", //selectC-3</p> <p> "page4-4-4.html" //selectC-4</p> <p> ),</p> <p> new Array( //selectB-5</p> <p> "page5-5-1.html", //selectC-1</p> <p> "page5-5-2.html", //selectC-2</p> <p> "page5-5-3.html", //selectC-3</p> <p> "page5-5-4.html" //selectC-4</p> <p> )</p> <p> )</p> <p>);</p> <p>function select(){</p> <p> var selectA = document.getElementById("selectA");</p> <p> var selectB = document.getElementById("selectB");</p> <p> var selectC = document.getElementById("selectC");</p> <p> var url = url_list[selectA.selectedIndex][selectB.selectedIndex][selectC.selectedIndex];</p> <p> </p> <p> alert(url);</p> <p> window.location = url;</p> <p>}</p> <p></script>

</head>

<body>

<button onclick="select();">click</button>

</body>

</html>

長々と申し訳ありません。よろしくお願いします。

2006/08/21 07:59:33
id:lains_you No.2

lains_you回答回数50ベストアンサー獲得回数102006/08/21 10:59:11

ポイント35pt
<html>
<head>
<script type="text/javascript">
var url_list = new Array(
	new Array(				//selectA-1
		new Array(			//selectB-1
			"page1-1-1.html",	//selectC-1
			"page1-1-2.html",	//selectC-2
			"page1-1-3.html",	//selectC-3
			"page1-1-4.html"	//selectC-4
		),
		new Array(			//selectB-2
			"page1-2-1.html",	//selectC-1
			"page1-2-2.html",	//selectC-2
			"page1-2-3.html",	//selectC-3
			"page1-2-4.html"	//selectC-4
		),
		new Array(			//selectB-3
			"page1-3-1.html",	//selectC-1
			"page1-3-2.html",	//selectC-2
			"page1-3-3.html",	//selectC-3
			"page1-3-4.html"	//selectC-4
		),
		new Array(			//selectB-4
			"page1-4-1.html",	//selectC-1
			"page1-4-2.html",	//selectC-2
			"page1-4-3.html",	//selectC-3
			"page1-4-4.html"	//selectC-4
		),
		new Array(			//selectB-5
			"page1-5-1.html",	//selectC-1
			"page1-5-2.html",	//selectC-2
			"page1-5-3.html",	//selectC-3
			"page1-5-4.html"	//selectC-4
		)
	),
	new Array(				//selectA-2
		new Array(			//selectB-1
			"page2-1-1.html",	//selectC-1
			"page2-1-2.html",	//selectC-2
			"page2-1-3.html",	//selectC-3
			"page2-1-4.html"	//selectC-4
		),
		new Array(			//selectB-2
			"page2-2-1.html",	//selectC-1
			"page2-2-2.html",	//selectC-2
			"page2-2-3.html",	//selectC-3
			"page2-2-4.html"	//selectC-4
		),
		new Array(			//selectB-3
			"page2-3-1.html",	//selectC-1
			"page2-3-2.html",	//selectC-2
			"page2-3-3.html",	//selectC-3
			"page2-3-4.html"	//selectC-4
		),
		new Array(			//selectB-4
			"page2-4-1.html",	//selectC-1
			"page2-4-2.html",	//selectC-2
			"page2-4-3.html",	//selectC-3
			"page2-4-4.html"	//selectC-4
		),
		new Array(			//selectB-5
			"page2-5-1.html",	//selectC-1
			"page2-5-2.html",	//selectC-2
			"page2-5-3.html",	//selectC-3
			"page2-5-4.html"	//selectC-4
		)
	)
);

function select(){
	var indexA = document.getElementById("selectA").selectedIndex;
	var indexB = document.getElementById("selectB").selectedIndex;
	var indexC = document.getElementById("selectC").selectedIndex;

	if( indexA == 0 ){
		alert("Aを選択してください。");
	}
	else if( indexB == 0 ){
		alert("Bを選択してください。");
	}
	else if( indexC == 0 ){
		alert("Cを選択してください。");
	}
	else{
		window.location = url_list[indexA-1][indexB-1][indexC-1];
	}
}
</script>
</head>
<body>

<select id="selectA">
	<option value="">選んでください。</option>
	<option value="1">1</option>
	<option value="2">2</option>
</select>

<select id="selectB">
	<option value="">選んでください。</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>

<select id="selectC">
	<option value="">選んでください。</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>

<button onclick="select();">click</button>

</body>
</html>

 前回の回答に「選択してください。」という選択項目を追加し、select()関数内の処理を修正しています。


 select()関数内では、選択インデックスが0であれば未選択としてエラーメッセージを表示しています。また、選択インデックスが1以上であれば、それを-1したものを配列のインデックスとして値を取得しています。

id:quait

lains_youさん。何度もありがとうございます。

早速試してみます。また機会がありましたら、是非、ご鞭撻よろしくお願いします。

2006/08/21 11:10:20

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません