テキストボックスとセレクトボックスの選択肢の連携

質問

この度はお世話になります。

１個のテキストボックスに入力された文字列により、その後の１個の
セレクトメニューの選択肢を変更することってできるのでしょうか？

具体的には以下のような動作です。

・デフォルトではテキストボックスに文字列が入力された場合は、
　その後のセレクトボックスには「トマト、きゅうり、ほうれんそう」
　の選択肢が入る。

・テキストボックスに「あいうえお」と入力された時のみ、その後の
　セレクトボックスが「りんご、みかん、ぶどう」の選択肢に変わる。

・テキストボックスに「かきくけこ」と入力された時のみ、その後の
　セレクトボックスに「あじ、さば、かつお」の選択肢に変わる。

こんな感じですが、よろしくお願い致します。
当方、只今javascriptを勉強しており、条件式に苦戦しております。
サンプルプログラムを見せていただけるとありがたく思います。

回答No.2

fujillin · ベストアンサー

＞１個のテキストボックスに入力された文字列により、その後の１個の
＞セレクトメニューの選択肢を変更することってできるのでしょうか？
HTML構造とか条件がいまいちはっきりしませんが、できると思われます。

＞当方、只今javascriptを勉強しており、条件式に苦戦しております。
とのことなので、苦戦なさっている条件分岐について、とりあえず思いつくものを…
と言っても、ご質問の内容であれば普通に条件分岐すればよいだけですが・・・

テキストボックスの値が、変数textValeに取得できているとして、

◇例1（ifによる分岐）
　if(textValue=""){
　　// 文字列が入力されていない場合の処理　
　}else if(textValue="あいうえお"){
　　// あいうえおの場合の処理
　}else if(textValue="かきくけこ"){
　　// かきくけこの場合の処理
　}else{
　　// 他の文字列の場合の処理
　}

◇例2（switch文で振分け）
　switch (textValue{
　case "":
　　// 文字列が入力されていない場合の処理
　　break;
　case "あいうえお":
　　// あいうえおの場合の処理
　　break;
　case "かきくけこ":
　　// かきくけこの場合の処理
　　break;
　default:
　　// 他の文字列の場合の処理
　　break;
　}

◇例3（ループで処理：場合分けが多いけれど処理が類似している時など）
caseData = [
{ value:"あいうえお", data:"hoge1" },
{ value:"かきくけこ", data:"hoge2" }
];
for(var i=0; i<caseData.length; i++){
if(textValue == caseData[i].value){
　　hogehoge(caseData[i].data); // 該当する場合の処理（引数は個別データ）
　　break;
}
}
if(i==caseData.length) hogehoge("hoge0"); // どれにも該当しない場合の処理

※例3は分岐の選択肢が多くて、処理内容が類似して一般化できる際に有効かと思います。
　ご質問の場合も「セレクトボックスの内容を変える」という処理が同じなので、応用は可能かと。

お礼

ご回答ありがとうございます。
わかりにくい表現になってしまいました。動作条件を少しわかりやすく整理して
掲載しましたので、よろしくお願いいたします。

補足

ネットを検索していたら、似たようなサンプルプログラムが公開されておりました。
http://www.openspc2.org/reibun/javascript/form_selectmenu/031/index.html

これは、セレクトメニュー１を選んだら、セレクトメニュー１の選択項目に関連する
セレクトメニューがもうひとつ表示されると言うものです。

こちらでやろうとしていることは、セレクトメニュー１ではなく、

テキストボックスに「あいうえお」と入力したら、「りんご、みかん、ぶどう」の
セレクトメニューが表示され、

テキストボックスに「かきくけこ」と入力したら、「あじ、さば、かつお」の
セレクトメニューが表示され、

テキストボックスに、上記以外の文字を入力したら、「トマト、きゅうり、ほうれんそう」の
セレクトメニューは表示され、

テキストボックスの未入力状態の時は、セレクトメニューは表示しない。

と言う条件のものでした。
なにしろ言葉では書けても、肝心な「条件式」がうまく書けなくて困っております。
サンプルプログラムがあれば、ひとつずつバラしながら検証できるのですが。。。
よろしくお願いいたします。

回答No.4

fujillin

ANo2,3です。

あいや～。見るたびに、タイポだらけだ・・・ (^_^;)

例1の条件式の等号は == または === でないとダメですね。

重ね重ね、申し訳ないです。 m(__)m

お礼

たびたびお手数お掛けします。

回答No.3

fujillin

ANo2です。

タイポがありました。m(__)m
例2の
switch (textValue{　⇒　switch (textValue){
で、閉じ括弧が抜けてましたね。

＞なにしろ言葉では書けても、肝心な「条件式」がうまく
＞書けなくて困っております。
＞サンプルプログラムがあれば、ひとつずつバラしながら
＞検証できるのですが

サンプルのつもりなんですけど・・・ (^_^;)

お礼

ありがとうございます。if～else 文で何とかできないか検討しています。
理由は単に「他がわからないから」です。
あ～情けない。。。

回答No.1

yambejp

そのページには一つしか該当するテキストとセレクトボックスはないのか
それとも複数あってすべて同じ仕様にしたいのかによってだいぶ処理がちがいます。

またセレクトボックスを変更する際、optionのテキスト部分は指示の通り
変更するとして、valueはどうするのでしょうか？

お礼

ありがとうございます。
「テキストボックスに何も入力されていない場合」と言う
動作が最初の質問時に抜けていました。すみません。

補足

ご回答ありがとうございます。

> そのページには一つしか該当するテキストとセレクトボックスはないのか？

テキスト入力部分１箇所に対して、そのテキスト入力に対応した選択肢が
変わるセレクト入力部分は１箇所です。

> またセレクトボックスを変更する際、optionのテキスト部分は指示の通り
> 変更するとして、valueはどうするのでしょうか？

テキスト入力部分に何も入力されていな時は、セレクト入力部分自体が
非表示になっていて、テキスト入力部分に文字列が入ると

<option value="トマト”>トマト</option>
<option value="きゅうり">きゅうり</option>
<option value="ほうれんそう">ほうれんそう</option>

が表示され、

更に、テキスト入力部分に「あいうえお」と入力された時のみ、セレクト入力
部分の選択肢が

<option value="りんご”>りんご</option>、
<option value="みかん">みかん</option>
<option value="ぶどう">ぶどう</option>

や、テキスト入力部分に「かきくけこ」と入力された時のみ、セレクト入力
部分の選択肢が

<option value="あじ”>あじ</option>、
<option value="さば">さば</option>
<option value="かつお">かつお</option>

となるようにしたいのですが。。。よろしくお願い致します。