この度はお世話になります。
1個のテキストボックスに入力された文字列により、その後の1個の
セレクトメニューの選択肢を変更することってできるのでしょうか?
具体的には以下のような動作です。
・デフォルトではテキストボックスに文字列が入力された場合は、
その後のセレクトボックスには「トマト、きゅうり、ほうれんそう」
の選択肢が入る。
・テキストボックスに「あいうえお」と入力された時のみ、その後の
セレクトボックスが「りんご、みかん、ぶどう」の選択肢に変わる。
・テキストボックスに「かきくけこ」と入力された時のみ、その後の
セレクトボックスに「あじ、さば、かつお」の選択肢に変わる。
こんな感じですが、よろしくお願い致します。
当方、只今javascriptを勉強しており、条件式に苦戦しております。
サンプルプログラムを見せていただけるとありがたく思います。
No.2ベストアンサー
- 回答日時:
>1個のテキストボックスに入力された文字列により、その後の1個の
>セレクトメニューの選択肢を変更することってできるのでしょうか?
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_s …
これは、セレクトメニュー1を選んだら、セレクトメニュー1の選択項目に関連する
セレクトメニューがもうひとつ表示されると言うものです。
こちらでやろうとしていることは、セレクトメニュー1ではなく、
テキストボックスに「あいうえお」と入力したら、「りんご、みかん、ぶどう」の
セレクトメニューが表示され、
テキストボックスに「かきくけこ」と入力したら、「あじ、さば、かつお」の
セレクトメニューが表示され、
テキストボックスに、上記以外の文字を入力したら、「トマト、きゅうり、ほうれんそう」の
セレクトメニューは表示され、
テキストボックスの未入力状態の時は、セレクトメニューは表示しない。
と言う条件のものでした。
なにしろ言葉では書けても、肝心な「条件式」がうまく書けなくて困っております。
サンプルプログラムがあれば、ひとつずつバラしながら検証できるのですが。。。
よろしくお願いいたします。
ご回答ありがとうございます。
わかりにくい表現になってしまいました。動作条件を少しわかりやすく整理して
掲載しましたので、よろしくお願いいたします。
No.4
- 回答日時:
ANo2,3です。
あいや~。見るたびに、タイポだらけだ・・・ (^_^;)
例1の条件式の等号は == または === でないとダメですね。
重ね重ね、申し訳ないです。 m(__)m
No.3
- 回答日時:
ANo2です。
タイポがありました。m(__)m
例2の
switch (textValue{ ⇒ switch (textValue){
で、閉じ括弧が抜けてましたね。
>なにしろ言葉では書けても、肝心な「条件式」がうまく
>書けなくて困っております。
>サンプルプログラムがあれば、ひとつずつバラしながら
>検証できるのですが
サンプルのつもりなんですけど・・・ (^_^;)
ありがとうございます。if~else 文で何とかできないか検討しています。
理由は単に「他がわからないから」です。
あ~情けない。。。
No.1
- 回答日時:
そのページには一つしか該当するテキストとセレクトボックスはないのか
それとも複数あってすべて同じ仕様にしたいのかによってだいぶ処理がちがいます。
またセレクトボックスを変更する際、optionのテキスト部分は指示の通り
変更するとして、valueはどうするのでしょうか?
この回答への補足
ご回答ありがとうございます。
> そのページには一つしか該当するテキストとセレクトボックスはないのか?
テキスト入力部分1箇所に対して、そのテキスト入力に対応した選択肢が
変わるセレクト入力部分は1箇所です。
> またセレクトボックスを変更する際、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>
となるようにしたいのですが。。。よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオンメニューをアン...
-
重たい処理のタイムアウト強制終了
-
JavaScriptからJAVAクラスを呼...
-
ExcelVBA で文字列の特定の文字...
-
jQueryの処理順序について
-
ツリー型 多階層メニューでの...
-
数値の定数を付ける時
-
tryの終了
-
Tomcat高負荷時の設定について
-
C#の処理をリアルタイムに表示...
-
JSP、サーブレットの初期処理
-
再度、スレッドが実行中かどう...
-
SwingUtilities.invokeLater(ne...
-
処理実行後、終了させないで最...
-
jQueryでdiv作成後まで待ってか...
-
「タイプ初期化子が例外をスロ...
-
エクセルVBAで、条件に一致する...
-
配列の重複する値とその個数を...
-
複数の変数を宣言する時、同時...
-
オブジェクト参照がオブジェク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tryの終了
-
Javaでのデバッグコード削除
-
Tomcat高負荷時の設定について
-
JavaScriptからJAVAクラスを呼...
-
[Java] while(true)の意味
-
数値の定数を付ける時
-
ラジオボタンの選択判定
-
JSP、サーブレットの初期処理
-
JavaでVBのDOEVENTSと同様の処...
-
JAVAからJAVASCRIPT関数を呼び出し
-
doGetとdoPostの違い
-
Delphiのマルチスレッドの割り...
-
C#で別スレッドの終了を知りたい
-
SwingUtilities.invokeLater(ne...
-
FocusLostでイベント処理を中断...
-
onBlurとonFocusの処理順序につ...
-
アコーディオンメニューをアン...
-
JAVAにおける画像のJPEG保存の...
-
Tomcatのスレッドを破棄する方法
-
C#でバックグラウンド処理から...
おすすめ情報