プロが教える店舗&オフィスのセキュリティ対策術

はじめまして。質問させてください。

セレクトメニューを選択するときに
たとえば、左のセレクトメニューに巨人を選択すると右の
セレクトメニューには巨人の選手を選択する項目になり、

左のセレクトメニューから阪神と選ぶと、右のセレクトメニューの項目が阪神の選手の項目になるように左のセレクトメニューのと右のセレクトメニューを連動させたいです。

また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですが、(javascriptを知らない人でも項目を変更できるように)

たとえば、ここのサイトのようにhttp://www.kyoto-su.ac.jp/~ushitaki/JavaScriptEx …

左のメニューの項目を選んだら、右の項目は左の項目にそった選択肢になるという形にしたいのです。

この場合どのようなやり方がありますでしょうか。ご教授のほどよろしくお願いいたします。

また、似たようなセレクトメニューがあるURLをご存知の方がいたら教えてください。よろしくお願いいたします。

A 回答 (7件)

>detaの項目の外部ファイルselectMenu.txtにvalue要素も書けたらいいのですが


なんとなく・のせられて、色々やらされてる気分になってきました…。
(元の質問と大分変わってきているし、項目を外部で入力させるにしても、バラバラなコードで入力させるというのも、コード設計とそれを利用するプログラムは密接な関係にあると思われるので、なんだかおかしい気がします…)
でもまあ、せっかくここまでつきあったので、やっときます。
方法としては、色々あると思いますが、ほとんど同じでいく方針で
サブメニューのテキストと値を
{key:表示テキスト,value:値}の形で入力させることにします。
今までの部分を置き換えるだけなので、それほど大きな変更ではないと思います。(パターンとしても認知しやすいと思います)
<script></script>の部分が分かれているのは、外部ファイルになっていると見なしてください。
長くはなっていますが、修正はほとんどありません。
この場合、MENUBのコードで、どのMENUAが選ばれたかわかるvalueになっているので、MENUAの方は、元に戻しました。もちろん、同様の修正をほどこすこともできます。
-------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>SELECT LIST で項目を絞り込む</title>
<script type="text/javascript">
<!--
data = [
// [メイン分類,サブ分類並び,…],
["関西",
{key:"京都",value:121},
{key:"大阪",value:165},
{key:"兵庫",value:177},
{key:"滋賀",value:132},
{key:"三重",value:147},
{key:"奈良",value:151},
{key:"和歌山",value:184}],
["中国",
{key:"広島",value:224},
{key:"山口",value:278},
{key:"岡山",value:263},
{key:"島根",value:244},
{key:"鳥取",value:213}],
["四国",
{key:"愛媛",value:339},
{key:"香川",value:368},
{key:"徳島",value:399},
{key:"高知",value:312}],
["九州",
{key:"福岡",value:496},
{key:"佐賀",value:477},
{key:"長崎",value:468},
{key:"大分",value:459},
{key:"熊本",value:433},
{key:"宮崎",value:413},
{key:"鹿児島",value:465}]
];
// -->
</script>
<script type="text/javascript">
<!--
window.onload=function (){
for(var i=0; i<data.length; i++){
document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]);
}
setSubMenu(0);
};

function setSubMenu(no){
document.FORM1.MENUB.length=0;
for(var i=1; i<data[no].length; i++){
document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value);
}
}
// -->
</script>
</head>
<body>
<form name="FORM1">
<select name="MENUA" onchange="setSubMenu(this.selectedIndex)">
</select>
<br>
<select name="MENUB" >
</select>
<br>
<input type="submit" value="送信">
</form>
</body>
</html>

この回答への補足

いや、なんかごめんなさい。学校の課題で難しいのやると評価されるんで、それで質問させてもらいました。最初のだけわかればよかったんですけど、とても丁寧に答えてくださったので、つい調子にのってたくさん質問してしまいました。本当にごめんなさい。

お気をわるくさせてしまい申し訳ありませんでした。
そして、丁寧に答えていただきましてありがとうございました。

補足日時:2005/06/29 21:40
    • good
    • 0

>フォームで送信したときにvalue要素も送られてくるようにしたい


現在の仕様では、value要素は、表示テキストと同じになっています。
value要素を数字にしたいということであれば
<option value="値">表示テキスト</option>
は、
プログラムでいうと
new Option(data[i][0],data[i][0]);
の部分で
Option(表示テキスト,値)
というふうになっています。
一般的に特別な値を振り分けるには、その部分もまた入力させないといけないですが単に順番に数値を設定するなら
Option(data[i][0],data[i][0]);

Option(data[i][0],i+1);

Option(data[no][i],data[no][i]);

Option(data[no][i],i);
にするだけでいいです。
この場合、
<input type="submit" value="送信">
とかでサブミットすると
関西、兵庫を選んだ場合
MENUA=1&MENUB=3
の様になります。
上記のサンプルの場合1始まりの順序になっていますが、
#5の補足の様にするには、適宜+1とかバイアスして下さい。

この回答への補足

お返事ありがとうございます。とても参考になります。

>>一般的に特別な値を振り分けるには、その部分もまた入力させないといけないですが

valueの数字がランダムで1,2,3・・・というふうな決まった順序でならんでいない場合、それもまた外部ファイルから読み込ませたいのですが、そうなると、いままで教えてくださったプログラムからかなりの修正が必要でしょうか?

京都が21,大阪が65という感じで数字がばらばらなのですが、その場合はどのような書き方をすればいいのでしょうか。できればdetaの項目の外部ファイルselectMenu.txtにvalue要素も書けたらいいのですが、不可能であれば複数の外部ファイルでもかまいません。もしいままでにおしえていただいたプログラムからの簡単な改造で修正できるのであればご教授ください。よろしくお願いいたします。

補足日時:2005/06/29 11:46
    • good
    • 0

><head>の中にいれて、src=もパスは間違いなくselectMenu.txtとやったのですが、selectタグの中はなにも表示されませんでした。

。。
え~そうですか??
もともとの#3が動くのであれば、動くと思うのですが・・
#3は、動いたのでしょうか?
使われている
<form name="FORM1">
<select name="MENUA" …>
<select name="MENUB" …>
の名前を合わせてありますか?
また、テストされたブラウザはなんでしょう?

この回答への補足

BLUEPIXYさんごめんなさい!できました。どうやらわたしの記述ミスだったようです!ありがとうございました!

それと、この方法でvalue要素も取得できますか?

フォームで送信したときにvalue要素も送られてくるようにしたいのですが、それは難しいですか?京都は2,大阪は3,兵庫は4,というふうにvalueの値を数字で取得できますでしょうか?そのvalueの数字をフォームから送られてくるようにしたいんです。

なんかいっぱい質問してしまってすいません。
ほんとうに感謝してます。こんなに詳しく説明してくれてありがとうございます。

補足日時:2005/06/28 15:54
    • good
    • 0

>外部ファイルに書けばいいんですか?その場合ファイル名は任意でつけていいのですか?


>どうやったら外部ファイルからoptionへ項目を読み込ませるのかがいまいちわかりません。
javascriptのファイルは、拡張子をjsにするのが慣例ですけども、ファイル名は任意で良いです。
例えば、
ファイル名を
selectMenu.txt
として
data = [
//[メイン分類,サブ分類並び,…],
["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"],
["中国","広島","山口","岡山","島根","鳥取"],
["四国","愛媛","香川","徳島","高知"],
["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"]
];
の部分をそのまま書き出します。このファイルでは、<script></script>はいりません。
この部分を読み込むには、
<script type="text/javascript" src="selectMenu.txt"></script>
の様に書きます。
srcのファイル名指定の所に、保存した実際のファイル名を書きます。
位置指定などはhtmlファイルとかと同じで例えばdataフォルダにあれば
src="data/selectMenu.txt"
とかになります。
<script type="text/javascript" src="selectMenu.txt"></script>
の部分を、元のスクリプトの部分の前に置けば
スクリプト全体としては、続けて書いてあるのと同じになります。
というわけで、全体としては次のようになります。

<script type="text/javascript" src="selectMenu.txt"></script>
<script type="text/javascript">
<!--
window.onload=function (){
for(var i=0; i<data.length; i++){
document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]);
}
setSubMenu(0);
};

function setSubMenu(no){
document.FORM1.MENUB.length=0;
for(var i=1; i<data[no].length; i++){
document.FORM1.MENUB.options[i-1] = new Option(data[no][i],data[no][i]);
}
}
// -->
</script>

蛇足
オプションへの設定は、もともとプログラムで設定しているので、上記以外に特別に何かをする必要はないです。
ただ、scriptをoffにしている環境では何も内容が表示されないので、その場合は、デフォルトの値みたいなモノが有った方がいいかと思われるかもしれません。
そういう場合は、とりあえず、普通にoptionをデフォルトとして書いて置いて
window.onload=function (){
document.FORM1.MENUA.length=0;
for(var i=0; i<data.length; i++){
document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]);
}
setSubMenu(0);
};
とかしておけば、スクリプトが動く場合は置き換えをします。

この回答への補足

さっそくのお返事ありがとうございます!

BLUEPIXYさんのアドバイスどおりやりましたがうまくいきませんでした・・

data = [
// [メイン分類,サブ分類並び,…],
["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"],
["中国","広島","山口","岡山","島根","鳥取"],
["四国","愛媛","香川","徳島","高知"],
["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"]
];

をselectMenu.txtのファイル名にして、

<script type="text/javascript" src="selectMenu.txt"></script>
<script type="text/javascript">
<!--
window.onload=function (){
for(var i=0; i<data.length; i++){
document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]);
}
setSubMenu(0);
};

function setSubMenu(no){
document.FORM1.MENUB.length=0;
for(var i=1; i<data[no].length; i++){
document.FORM1.MENUB.options[i-1] = new Option(data[no][i],data[no][i]);
}
}
// -->
</script>

を<head>の中にいれて、src=もパスは間違いなくselectMenu.txtとやったのですが、selectタグの中はなにも表示されませんでした。。。

むずかしいですね。でもたいへん親切な回答をしていただきましてありがとうございました。

補足日時:2005/06/28 00:45
    • good
    • 0

#1の方と似てますが、


data = [

];
の部分を外部ファイルにするのは同じで、
並びの最初が、メインのキーになるというのが違う部分です。
あとフォームの部分では、<option>がありません。
野球選手についてよく知らないので、県名でやってます。
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>SELECT LIST で項目を絞り込む</title>
<script type="text/javascript">
<!--
data = [
// [メイン分類,サブ分類並び,…],
["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"],
["中国","広島","山口","岡山","島根","鳥取"],
["四国","愛媛","香川","徳島","高知"],
["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"]
];

window.onload=function (){
for(var i=0; i<data.length; i++){
document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]);
}
setSubMenu(0);
};

function setSubMenu(no){
document.FORM1.MENUB.length=0;
for(var i=1; i<data[no].length; i++){
document.FORM1.MENUB.options[i-1] = new Option(data[no][i],data[no][i]);
}
}
// -->
</script>
</head>
<body>
<form name="FORM1">
<select name="MENUA" onchange="setSubMenu(this.selectedIndex)">
</select>
<br>
<select name="MENUB" >
</select>
</form>
</body>
</html>

この回答への補足

お返事ありがとうございます。とっても丁寧でうれしいです!ありがとうございます。

えーっと、外部ファイルはできれば.txtから読み込ませたいのですけどそれは可能でしょうか?

あと、

data = [
// [メイン分類,サブ分類並び,…],
["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"],
["中国","広島","山口","岡山","島根","鳥取"],
["四国","愛媛","香川","徳島","高知"],
["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"]
];

を外部ファイルに書けばいいんですか?その場合ファイル名は任意でつけていいのですか?どうやったら外部ファイルからoptionへ項目を読み込ませるのかがいまいちわかりません。

たとえば、test.htmlに

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>SELECT LIST で項目を絞り込む</title>
<script type="text/javascript">
<!--

window.onload=function (){
for(var i=0; i<data.length; i++){
document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]);
}
setSubMenu(0);
};

function setSubMenu(no){
document.FORM1.MENUB.length=0;
for(var i=1; i<data[no].length; i++){
document.FORM1.MENUB.options[i-1] = new Option(data[no][i],data[no][i]);
}
}
// -->
</script>
</head>
<body>
<form name="FORM1">
<select name="MENUA" onchange="setSubMenu(this.selectedIndex)">
</select>
<br>
<select name="MENUB" >
</select>
</form>
</body>
</html>

を書いて、外部ファイルtest.jsに

data = [
// [メイン分類,サブ分類並び,…],
["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"],
["中国","広島","山口","岡山","島根","鳥取"],
["四国","愛媛","香川","徳島","高知"],
["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"]
];

を書けばいいんですよね?その場合、test.htmlの中に、test.jsの記述を書かないといけないと思うのですが、どこに書けばいいのかがわかりません・・。

補足日時:2005/06/27 17:34
    • good
    • 0

>セレクトメニューの項目を外部ファイルから読み込ませたいのですが、(javascriptを知らない人でも項目を変更できるように)



に関してですが、質問させてください。

この部分は、サーバー側のことを言っているのでしょうか?
つまり、外部ファイル(JSファイル等)から文字列を取得し、セレクトメニューに表示するようなシステムを作り、ホームページの管理人に使ってもらうものですか?
(JavaScriptがわからない人=管理人)

それとも、クライアント側のことを言っているのでしょうか?
つまり、ホームページを見る人が外部ファイルをいじって、セレクトメニューに表示する内容を変更するのですか?
(JavaScriptがわからない人=不特定多数のHP閲覧者)

ご回答、よろしくお願いいたします。


※参考
サーバー側のことならばまったくもって問題はないのですが、クライアント側の話となれば、ちょっと厄介です。
CGI等を組まなければなりません。

理由ですが、読み込む外部ファイルと言うものは、サーバーにあるべきもので、クライアントから勝手にアクセスされては困るものです。(HPの内容を勝手に書き換えられては困ります)
そこでクライアントが変更したい内容は、いったんサーバー側でデータのチェック等を行い、サーバー側で変更をかけることになります。
この作業はCGI等を用いることになります。

また、クライアント側にあるファイルを読み込むということも絶対に出来ないというわけではないのですが、基本的にセキュリティの関係でJavaScriptからはクライアントのファイルにアクセスできません。

駄文失礼しました。

この回答への補足

お返事ありがとうございます。

えっと、おっしゃるとおり、前者です。外部ファイルをできれば.txtにして、清原、元木、みたいにjavascriptを知らない人でも文字だけ入れれば項目を変更できるというふうにしたいんです。
むずかしいですか?

補足日時:2005/06/27 17:40
    • good
    • 0

これでどうでしょう。



・フォームの記述
-----------------------------------
<form name="fm">
<p>
球団:<select name="left" onchange="resetOptions()">
<option>巨人</option>
<option>阪神</option>
<option>楽天</option>
</select>

選手:<select name="right">
<option>-</option>
</select>
</div>
</form>
-----------------------------------

・項目の書き換えスクリプト
-----------------------------------
<script type="text/javascript">
<!--
window.onload = resetOptions;

function resetOptions(){
var i;
var num = document.fm.left.selectedIndex;
var len = list[num].length
document.fm.right.options.length = len;
for (i = 0; i < len; i++) {
document.fm.right.options[i].text = list[num][i];
}
}
//-->
</script>
-----------------------------------

・外部ファイル(メニューの項目)の記述例
縦方向は、左の選択肢に対応する項目順に並べてください。
-----------------------------------
var list = [
["清水", "元木", "ローズ", "小久保"],
["赤星", "鳥谷", "シーツ", "金本"],
["磯部", "沖原", "トレーシー", "山崎"]
];
-----------------------------------

この回答への補足

お返事ありがとうございます。みなさんの親切にはとても感激しています。ありがとうございます。

上の方へも書いたのですが、

var list = [
["清水", "元木", "ローズ", "小久保"],
["赤星", "鳥谷", "シーツ", "金本"],
["磯部", "沖原", "トレーシー", "山崎"]
];

をtest.jsに書いた場合、

test.htmlには、

<html>
<head>
<title></title>

<script type="text/javascript">
<!--
window.onload = resetOptions;

function resetOptions(){
var i;
var num = document.fm.left.selectedIndex;
var len = list[num].length
document.fm.right.options.length = len;
for (i = 0; i < len; i++) {
document.fm.right.options[i].text = list[num][i];
}
}
//-->
</script>

</head>
<body>
<form name="fm">
<p>
球団:<select name="left" onchange="resetOptions()">
<option>巨人</option>
<option>阪神</option>
<option>楽天</option>
</select>

選手:<select name="right">
<option>-</option>
</select>
</div>
</form>
</body>
</html>

となると思いますが、test.jsの項目をtest.htmlに読み込ませるにはどうしたらいいですか?
初歩的な質問ですいません。。。。

補足日時:2005/06/27 17:43
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!