• 締切済み

jsのselectboxについて

さきほど select id="select" class="dropdown"> <option>選択してください</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> 　　　　　　　　　　　　<option value="4">4</option> </select> このようなセレクトボックスを使ってif文？のように 1のoptionを選択したならAと表示する 2のoptionを選択したならBと表示する... というふうにするにはどのようなプログラムにするべきでしょうか？ どうかお知恵をお貸しください。 と質問したのですが、補足です。 この表示というのはalertではなくdocument.write("")の形での表示です。

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

ちなみにこの場合、document.write()は使えないと思った方がよいです。 divにidを振ってinnerHTMLを書き換えたり input type="text"の要素のvalueを書き換えたりするのが妥当

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptのselectboxについての

    <select id="select" class="dropdown"> <option>選択してください</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> 　　　　　　　　　　　　<option value="4">4</option> </select> このようなセレクトボックスを使ってif文？のように 1のoptionを選択したならAと表示する 2のoptionを選択したならBと表示する... というふうにするにはどのようなプログラムにするべきでしょうか？ どうかお知恵をお貸しください。

  • Javascriptの中に外部jsファイルを呼び出したい。

    入力フォームで都道府県などのたくさん項目がある プルダウンメニューやセレクトボックスを外部化し jsの中には document.write('<option value="1">北海道</option>'); document.write('<option value="2">青森</option>'); document.write('<option value="3">岩手</option>'); document.write('<option value="4">宮城</option>'); などとし、ファイル名は「todou.js」としました。 セレクトボックスの外部ファイルは document.write('<option value="1">インターネット</option>'); document.write('<option value="2">テレビ</option>'); document.write('<option value="3">新聞</option>'); などとし、外部ファイルは「kikkake.js」としました。 htmlのところには <tr><td>都道府県：</td> <td><select> <script src="select1.js"type="text/javascript"> </script> などとし、載せることはできました。 しかし、最後に送信ボタンを押した時に 確認するためにアラートで選択したものを出したい時に どうやって呼び出したらよいのでしょうか？ 色々調べてみたらまず <script language="JavaScript" src"todou.js"></script> とすると書いてありました。 しかし複数の外部ファイルを呼び出すためにはどうしたら よいのでしょうか？ あとアラートで確認するために function Check(){ var myTodou = document.myForm.src"todou.js".value; alert('都道府県：' + myTodou); とするのでしょうか？ 不備部分がありましたらご指摘ください。 どうかよろしくお願いします。

  • 入力フォームのテキストのエラーメッセージについて

    javascript　２つのセレクトボックスを全て選択されていないと、「テキストによるエラーメッセージを表示させるコード」を調べています。 該当コードは<script>■■四角の記号の部分です。 セレクトボックスを２つとも未選択でsubmitを押すと、アラートのメッセージとテキストエラーによるメッセージ２つが同時に表示されるようになっています。 コードはきちんと起動します。 該当部分のdocument.querySelector('.err')?.remove();の意味が理解できずにいます。 insertAdjacentHTMLで出したテキストエラーをセレクトボックスが空欄でない時に非表示にするとい解釈のようですが、あってますでしょうか？ class名やid名に('.err')?という名前は使用していませんがドットに.errとクエスチョンマーク？とはどういう意味なのでしょうか？ 条件演算子の？でしょうか条件演算子の構文で変数 = 条件 ? 値１ : 値２;の構文とも違うようですし。 分からずにいます。回答よろしくお願いいたします。 ---HTMLのコード--- <body> <form action="form1.php" method="post" id="form"> 選択項目①： <select id="fruits" class="select1" name="fruits"> <option value="">果物を選択する</option> <option value="リンゴ">>リンゴ</option> </select> 選択項目②： <select id="fruits2" class="select1" name="fruits2"> <option value="">食事を選択する</option> <option value="ごはん">>ごはん</option> </select> <div class="alert15"></div><!--alert15 ２つのフォーム全て記入がない場合ここにテキストエラーを表示する--> <button id="submit" class="yohaku"> </button> </form> ---javascriptののコード--- <script> const form = document.querySelector('#form'); const fruits = document.querySelector('#fruits'); const fruits2 = document.querySelector('#fruits2'); // セレクトボックスを選択されてないとアラートによるエラーメッセージを表示 form.addEventListener('submit', function(event) { let msg = ""; if (fruits.value == "") msg += "選択項目①：※選択項目①を選択して下い。\n"; if (fruits2.value == "") msg += "選択項目②：※選択項目②を選択してください。\n"; if (msg != "") { event.preventDefault(); alert(msg); } }); </script> ■■ <script> // ２つとも全て選択されてないとテキストによるエラーメッセージの表示 form.addEventListener('submit', e=>{ document.querySelector('.err')?.remove(); document.querySelector('.alert15').insertAdjacentHTML('afterend',`<span class="err">※選択項目①と選択項目②を全て選択して下さい。</span>`); },true); </script> </body>

  • Javascriptで質問です２

    セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを２段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • style.displayだと効率悪いから…

    style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById(&#039;Box1&#039;).style.display = "";と、 document.getElementById(&#039;Box1&#039;).style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById(&#039;sample&#039;)){ id = document.getElementById(&#039;sample&#039;).value; if(id == &#039;select1&#039;){ document.getElementById(&#039;Box1&#039;).style.display = ""; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = "none"; }else if(id == &#039;select2&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = ""; document.getElementById(&#039;Box3&#039;).style.display = "none"; } else if(id == &#039;select3&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。

  • style.displayだと効率悪いから...

    style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • セレクトボックス　の　選択規制

    今、フォームで入力画面を作っています。 その中にセレクトボックスが４つアリ、現在「未選択」の場合エラーチェックをするようにしています。 そして、ここにもうひとつのチェックを追加したいのですが皆目見当が付きません・・・ 条件　kaikai、bunkai1、bunkai2、heikai　 全てが不参加の場合 "参加する会を最低一つは選択してください。"と言うコメントをだすというものです。 皆様よろしくお願いいたします。 ********　　現在の JavaScript　　********* <SCRIPT language="JavaScript"> <!-- //フォームチェック function fcheck() { if(document.form1.kaikai.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai1.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai2.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.heikai.value == "未選択") { window.alert("選択してください"); return false; } } //--> </SCRIPT> ********　　HTML内のフォーム　　********* <table> <tr><th>1 ( * )</th> <td> <SELECT NAME="kaikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>2 ( * )</th> <td> <SELECT NAME="bunkai1"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>3 ( * )</th> <td> <SELECT NAME="bunkai2"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>4 ( * )</th> <td> <SELECT NAME="heikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> </table>

  • struts selectbox optionsCollection labelテキストを取得したい

    こんにちは。技術者のみなさん、是非力を貸してください。 JSPのページでselectボックスで選択したlabel値をjavascriptで取得したいのですが、取得できません。value値は以下のように取得できます。 何か良い方法がありましたら教えて下さい、よろしくお願い致します。 <script type="text/javascript"> 　function GetLabel(){ //value値は取得できる 　　alert(formname.aa.value); //label値を取得したい 　　alert(); 　} </script> <html:select property="aa" value="" > <html:optionsCollection name="list" value="id" label="name"/> </html:select>

  • selectボックスの選択結果を変数に代入したい

    ブログのホームページで過去のブログカレンダーを表示させるために、年と月をセレクトボックスから入力して希望の年月のカレンダーを表示させようと頑張っています。 下記プログラムを作成しましたが、selectボックスから選択した年号を変数に代入することが出来ず、取得した年号をjavaの内部処理に使うことが出来ません。 考えられることはいろいろやってみましたが、全て変数に代入するところでうまくいきません。 よろしくご指導お願いします。 <html> <head> <title>選択された表示テキストを取得する</title> </head> <body> <select name="year" onchange="alert(getSelectedText(this))"> <option value="1">2014</option> <option value="2">2013</option> <option value="3">2012</option> </select><a>年</a> <script type="text/javascript"> function getSelectedText(obj){ var txt = obj.options[obj.selectedIndex].text; // 表示テキスト取得 return 'text = ' + txt; // 表示テキストをリターン var selectYear = text; // 表示テキストを変数に代入 } alert(selectYear); // 変数の内容をアラート表示 /*if(selectYear==2014){　　　　　　　　　　　// 変数を内部処理に使用 document.write('\ <select name="month" onchange="selectMonth(this)">\ <option value="1">1</option>\ <option value="2">2</option>\ <option value="3" selected>3</option>\ <option value="4">4</option>\ </select><a>月</a>\ ');*/ </script> </body> </html>

  • JSでセレクトボックスの内容を切り替えたい

    年末を向かえましたが、クリアできない問題を抱えて焦っています。 あるショッピングサイトを構築しておりますが、 商品詳細ページでカラーを選択するとそれに対応したサイズを 表示させたいと思っています。 カラー、サイズ共に異なるセレクトボックスを使用しております。 //サンプルデータ（2次元配列） var dataStock = new Array(new Array("ブラック", "S", 2), new Array("ブラック", "M", 3), new Array("ホワイト", "S", 1), new Array("ホワイト", "M", 2), new Array("ホワイト", "L", 1), new Array("レッド", "M", 3), new Array("レッド", "L", 2)); var dataSize = new Array(); //----------------- とりあえずデータ表示 ----------------- document.write("<table border='1'>"); for(i=0; i<data.length; i++) { document.write("<tr>"); for(n=0; n<data[i].length; n++) { document.write("<td>"+data[i][n]+"</td>"); } document.write("</tr>"); } document.write("</table><br /><br />"); //----------------- カラー表示 ----------------- document.write("<select name='color' onchange=getNo2(this.value);>"); for(i=0; i<data.length; i++) { document.write("<option value='"+data[i][0]+"'>"+data[i][0]+"</option>"); } document.write("</select><br /><br />"); //----------------- サイズ表示 ----------------- function getNo2(color) { document.write("<select name='size'>"); for(i=0; i<data.length; i++) { //↓2次元配列から選択したカラーの情報を取得 if(color == data[i][0]) { dataSize[i] = data[i][1]; document.write("<option value='"+dataSize[i]+"'>"+dataSize[i]+"</option>"); } } document.write("</select>"); } 上記処理だと、「対応したカラーのサイズを表示する」という 目的は達成できますが、カラーを選択すると ページ全部がサイズに上書きされ、サイズのセレクトボックスしか 表示されません。 当たり前ですが・・・ いろいろ試してみましたが、どれもうまく行きませんでした。 何か良いアドバイスがあればご教授下さい。 よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する