人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

以前、こちらへ以下の内容で質問し、すばらしい回答を得たのですが、これに付け加え、セレクトメニューの最初に『選んでください。』などと表示し
なにも選択しなかった場合に『何か選択してください。』などの小窓が表示されるようにしたいです。よろしくお願いします。

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

●質問者: quait
●カテゴリ:コンピュータ
✍キーワード:セレクト ホームページ 検索 過去 選択肢
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● yetanother
●35ポイント

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 {

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

}

}

◎質問者からの返答

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

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

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

<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>

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


2 ● lains_you
●35ポイント
<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したものを配列のインデックスとして値を取得しています。

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ