selectboxの選択項目でselectboxを変化させるには？
[上に]
[前に]
[次に]
雨水
[E-Mail]
1997/10/14(火) 20:16:03
テレビのチャンネルのような子ウインドウを作ってます（JavaScript)。
どんなものかというと、、一つ目のselectboxからジャンルを選択すると、もう一つのselectboxにその
ジャンルのリンクが表示され、そのリンクを選択するとウインドウにリンク先を表示するという物です。
表示するウインドウもユーザがカスタマイズできるようになっています。
悩んでいるのは、ジャンルごとにリンクの数が違うので、リンクを表示する２つめのボックスの<option>
をどう書いたらよいのだろうか、という事です。
どうかこんな私に救いの手を。
飯塚
[E-Mail]
[HomePage]
1997/10/23(木) 22:48:32
<HTML>
<HEAD>
<META Copyright="Copyright(C)1997 IIZUKA,Shinji. All RIght Reserved">
<META Author="IIZUKA,Shinji (siizuka@apollo.releenet.co.jp">
<!--面白そうなので、ちょっとコーディングしてみました。
もしよろしかったらお使いください。
ただし、このスクリプトはNN3.0以降でしか動かないようです。(IEはダメ)
ちなみに、タブを全部全角スペースにしているので、コピーしたら
エディタで置き換えてくださいね。 -->
</HEAD>
<TITLE>TEST</TITLE>
<SCRIPT LANGUAGE="JavaScript">
//<!--
// -------- オプションボタン生成関数 -----------------
// Selectオブジェクトのインスタンスをもらい、指定された
// 添字にあわせてオプションを作成します。
function RecreateOption( instance, idx ) {
// NN3.0以外なら何もしません。
if ( navigator.appName.substring(0,7) == 'Netscap' &&
navigator.appVersion.substring(0,1) >= '3' ) {
if ( idx == 0 ) {
instance.length = 5;
instance.options[0].value = "idx0_0";
instance.options[1].value = "idx0_1";
instance.options[2].value = "idx0_2";
instance.options[3].value = "idx0_3";
instance.options[4].value = "idx0_4";
instance.options[4].text = "item 4 of idex0";
instance.options[0].text = "item 0 of idex0";
instance.options[1].text = "item 1 of idex0";
instance.options[2].text = "item 2 of idex0";
instance.options[3].text = "item 3 of idex0";
instance.options[0].selected = true;
} else if ( idx == 1 ) {
instance.length = 3;
instance.options[0].value = "idx1_0";
instance.options[1].value = "idx1_1";
instance.options[2].value = "idx1_2";
instance.options[0].text = "item 0 of idex1";
instance.options[1].text = "item 1 of idex1";
instance.options[2].text = "item 2 of idex1";
} else if ( idx == 2 ) {
instance.length = 4;
instance.options[0].value = "idx2_0";
instance.options[1].value = "idx2_1";
instance.options[2].value = "idx2_2";
instance.options[3].value = "idx2_3";
instance.options[0].text = "item 0 of idex2";
instance.options[1].text = "item 1 of idex2";
instance.options[2].text = "item 2 of idex2";
instance.options[3].text = "item 3 of idex2";
}
}
// 該当インスタンスの先頭を選択させておきます。
instance.options[0].selected = true;
}
// -------- インスタンス生成ドライバ --------
function CreateSubSelectBox() {
// メインで選択された要素の添字を得て、生成関数に渡します。
ix = document.the_form.main_select.selectedIndex;
RecreateOption( document.the_form.sub_select, ix );
return (0);
}
//-->
</SCRIPT>
<!-- ここからHTMLの始まり --->
<BODY>
<FORM NAME="the_form" METHOD=GET>
<!-- メインのSelect -->
<SELECT NAME="main_select" onChange="CreateSubSelectBox();return(0);">
<OPTION VALUE="0" CHECKED>index 0
<OPTION VALUE="1">index 1
<OPTION VALUE="2">index 2
</SELECT>
<!-- サブのSelect -->
<SELECT NAME="sub_select">
<OPTION VALUE="0">ごめんなさい！
<OPTION VALUE="1">この機能は
<OPTION VALUE="2">Netscape Navigator
<OPTION VALUE="3">3.0以降でないと
<OPTION VALUE="4">使えません。
</SELECT>
<SCRIPT LANGUAGE="JavaScript">
//<!--
// 配列を初期化（メインの先頭が選択されたとみなします）
RecreateOption( document.the_form.sub_select, 0 );
//-->
</SCRIPT>
</BODY>
</HTML>
かわもと
[E-Mail]
1997/11/11(火) 12:51:24
前提として親になるSelectBoxと子供のSelectBoxを用意しておきます。
子供のSelectBoxは、親が選択されると内容が変わる場合、
１．子供のSelectBox
valueは設定しない
<select name="child">
<option>
<option>
<option>
:
</select>
２．親のSelectBoxでonChangeを設定
３．onChangeイベントのスクリプト
function chg() {
var idx = document.form.oya.options.selectedIndex;
if (deocument.form.oya.options[idx].value = "nn") {
document.form.child.options.length = 2;
document.form.child.options.[0].value = "xxx"
document.form.child.options.[0].text = "XXX"
:
}
document.form.child.options[0].selected = true;
}
という様な感じではいかがでしょう。
ただ、IEでは動かないかもしれません。
ひつじどし
2000/03/14(火) 15:47:21
私も同じようなことがやりたくて,以下のように作りました。
IE5では動作するのですが,NN4.6では一つ目のセレクト項目を選択しても二つ目のセレクトに変化がありません。それでもって、
JavaScript error: Type 'javascript:' into Location for details
というメッセージがブラウザの下のほうに現れます。
これはどういうことなのか,どうすれば動作してくれるのか,
どなたか教えてください。
-----------以下が私が作ったものです。---------------<HTML>
<HEAD>
<script language="JavaScript">
<!--
function subcategory() {
c = document.menu.main.options.value;
if(c== "01") {
document.menu.sub.options.length = 4;
for(i = 0;i < 4;i++) {
document.menu.sub.options[i].value = i + 1;
}
document.menu.sub.options[0].text = "タンシチュー";
document.menu.sub.options[1].text = "牛丼";
document.menu.sub.options[2].text = "ステーキ";
document.menu.sub.options[3].text = "焼肉";
}
if(c== "02") {
document.menu.sub.options.length = 3;
for(i = 0;i < 3;i++) {
document.menu.sub.options[i].value = i + 1;
}
document.menu.sub.options[0].text = "とんかつ";
document.menu.sub.options[1].text = "生姜焼き";
document.menu.sub.options[2].text = "角煮";
}
if(c== "03") {
document.menu.sub.options.length = 2;
for(i = 0;i < 2;i++) {
document.menu.sub.options[i].value = i + 1;
}
document.menu.sub.options[0].text = "やきとり";
document.menu.sub.options[1].text = "からあげ";
}
document.menu.sub.options[0].selected = true;
return(0);
}
//-->
</script>
</HEAD>
<BODY>
<form name="menu">
メインディッシュ<select name="main" onChange="subcategory()">
<option selected value="00">[選択してください。]</option>
<option value="01">うし</option>
<option value="02">ぶた</option>
<option value="03">とり</option></select>
内容<select name="sub"></select>
</form>
</BODY>
</HTML>
ペンギン
2000/03/14(火) 16:03:28
２年半前の質問だよ？（＾＾；
ひつじどし
2000/03/14(火) 17:00:49
そうです。検索して見つけました。
２年半前の方々はIEでは動かないと言ってるんですが,私のほうは
逆なんです。やりたい内容は同じだったので,続けて書いてもいいかと
思ったのです。どうかどうか,ご容赦ください。でもって、どなたか
教えてください。
Tmb
2000/03/14(火) 17:39:44
＞c = document.menu.main.options.value;
多分これでは？
IEではこれで選ばれてる項目のvalueが取得できるけどNNだと
document.menu.main.options[document.menu.main.selectedIndex].value
とかしないと取得できなかったかと。
ひつじどし
2000/03/15(水) 13:14:50
[[解決]]
Tmbさんありがとうございました。ご指摘の箇所を直し、
c = document.menu.main.options[document.menu.main.selectedIndex].value
にして、二つ目のセレクトの
内容<select name="sub"></select>
の部分を
内容<select name="sub"><option></option></select>
にしたらうまく動きました。IE5でもNN4.6でも大丈夫でした。
もともとの質問者ではありませんが、........失礼します! [解決]！
[上に]
[前に]
[次に]