セレクトメニューの値を読み出す方法

2023/08/02 18:33

このQ&Aのポイント

セレクトメニューのoptionに設定した値を読み出す方法について解説します。
JavaScriptを使用して、セレクトメニューの値を取得し、表示する方法をご紹介します。
また、会員価格を計算して表示する機能も追加しています。

ベストアンサー

セレクトメニューの値を読み出す方法

2005/11/15 03:11

セレクトメニューのoptionに設定した値を読み出したいのですがうまくいきません。間違っている部分をご指摘いただけませんでしょうか。よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script type="text/javascript">  </script> </head> <body> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <form> <select onchange="checkm(this)"> <option value="20000">シルバー</option> <option value="30000">ゴールド</option> <option value="40000">プラチナ</option> </select> </form> </body> </html>

toutetsu
お礼率35% (25/71)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

みずの（@mizuno3）
ベストアンサー率73% (192/263)

2005/11/15 03:36 回答No.1

function checkm(fObj){ price = fObj.options[fObj.selectedIndex].value; } この関数を読んだ後でデータを書き出す処理を入れないとダメだと思います。 document.write()でも良いのですが、書き出す位置をHTMLで作っておくといいんじゃないかな？と思います。 function checkm(fObj){ price = fObj.options[fObj.selectedIndex].value; document.getElementById('priceArea').innerHTML = price; } -中略- <div id="priceArea"></div> <form> <select onchange="checkm(this)"> <option value="20000">シルバー</option> <option value="30000">ゴールド</option> <option value="40000">プラチナ</option> </select> </form> </body> </html> こんな感じとか。

関連するQ&A

セレクトメニューで選択された項目に応じて、別のセレクトメニューの内容を変更する場合について
アドバイスお願いします。ページロード時、最初ののセレクトメニューは「国を選択してください」が選択された状態となりますが、次のセレクトメニューが空白になってしまいます。これを最初のメニューと同じく「国を選択してください」と表示させるには、どうしたらよろしいでしょうか？【HTML】 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>JavaScript</title> <link rel="stylesheet" type="text/css" href="main.css" media="all"> <script type="text/javascript" src="main.js"></script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="">国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub">国を選択してください</select> </form> </body> </html> 【main.js】 window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [[ ],[ { text:"東京", value:"tokyo"}, { text:"大阪", value:"osaka"}, { text:"名古屋", value:"nagoya"} ],[ { text:"ニューヨーク", value:"ny"}, { text:"ロサンゼルス", value:"la"} ] ]; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ selObj.options[i] = new Option(optionData[selNo][i].text, optionData[selNo][i].value); } } } また、質問にありますようなセレクトメニューを実装する場合、JavaScriptとAJAX、どちらが適したものと言えるのでしょうか？
- ベストアンサー
- JavaScript
セレクトメニューに応じたdivタグの内容
javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>
- ベストアンサー
- JavaScript
for文についてご教授ください
javascriptを学習しています。初級者のためご教授のほどお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <script> function kazu(){ var fObj = document.itemlist; var price1 = fObj.item1.options[fObj.item1.selectedIndex].value; var price2 = fObj.item2.options[fObj.item2.selectedIndex].value; var total = parseFloat(price1) + parseFloat(price2); document.getElementById("total").value = total; } </script> </head> <body> <header> <form action="#" name="itemlist" > <table> <tr> <td> <select name="item1" onchange="kazu()"> <option value="100">itemA-1</option> <option value="200">itemA-2</option> </select> </td> </tr> <td> <select name="item2" onchange="kazu()"> <option value="1000">itemB-1</option> <option value="2000">itemB-2</option> </select> </td> </tr> <tr> <td name="total"> <input type="text" value="" id="total" /> </td> </tr> </table> </form> </body> </html> 上記の内容をfor文を使い動作するようにと思っています。自分で以下の内容を考えたのですがが動作しません。以下の内容の問題点を教えいただければと思います。なにとぞよろしくお願いいたします。 function kazu(){ var fObj = document.itemlist; var len = document.itemlist.length; for(i=1;i<=len;i++){ var price[i] = fObj.item[i].options[fObj.item[i].selectedIndex].value; } var total = parseFloat(price1) + parseFloat(price2); document.getElementById("total").value = total; }
- 締切済み
- JavaScript
セレクトで選んだ数の計算方法
初心者なので基本的な質問ですが、よろしくお願いします。セレクトで選んだ数値が2つあり、その積を表示したいのです。どうしたらよいでしょうか。 </script> <script langauage="JavaScript">  </script> </head> <body> <form name="form1"> <select size="1" name="select2" id="s2" onchange="selectChange()"> <option value="5">　５</option> <option value="9">　９</option> </select> </form> <form name="form1"> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2">　２</option> <option value="12">１２</option> </select> </form> <input type="text" name="kei" size="10">　 <input type="button" value="計算" onmousedown="calcNum()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、どのようにしたら良いか、教えてください。根本的に違っているようでしたら、どうやればよいのか教えてください。よろしくお願いします
- ベストアンサー
- JavaScript
セレクトメニューから該当するページを表示
下記コードを作成しました。セレクトメニューを選択したら該当するページを表示させるプログラムです。 <select name="cmbSel" onChange="PageJump()"> <option>トップページ1</option> <option>トップページ2</option> 上記だけでリンクページへ飛ぶような事はできないのでしょうか？どなたかご存知の方いましたらご教授頂けると幸いです。宜しくお願い致します。 ///////////////////////////////////////////////////////////////// </select> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <script language="JavaScript" type="text/javascript">  </script> <form name="frmMain"> <select name="cmbSel" onChange="PageJump()"> <option>トップページ1</option> <option>トップページ2</option> </select> </form> </HTML>
- ベストアンサー
- JavaScript
セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算をプルダウンメニューで選択し、３つ目のテキストボックスに計算結果を表示するにはどのようにしたらよいのでしょうか？とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript">  </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。どうかよろしくお願いします。
- ベストアンサー
- JavaScript
メールフォーム内の自動計算　valueの値を2つの目的で使いたい
以下の様な形で、自動計算フォームを作っています。金額は「value="　"」から計算されているのですが、この部分は同時に使おうと思っているメール送信の商品名の部分にあたります。このまま送信してしまうと、商品名が数字だけになってしまうのですが、何かよい方法をご存知でしょうか・・・。メール送信のプログラムは私の方では変えられないので、出来れば以下の自動計算フォームを変える事で解決できたらと思っています。 javascriptは専門ではないのですが、こつこつ勉強中です。よろしくお願いいたします。 -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript">  </script> </head> <body> <form name="mail_form"> <p id="mail-form-box1"> ●商品１<br /> <select name="goods1" onChange="cal()"> <option value="100">バッグA 100円</option> <option value="200">バッグB 200円</option> <option value="300">バッグC 300円</option> </select> </p> <p id="mail-form-box2"> ●商品２<br /> <select name="goods2" onChange="cal()"> <option value="100">靴A 100円</option> <option value="200">靴A 200円</option> <option value="300">靴A 300円</option> </select> </p> 合計: ＄<input type="text" name="field_total" value="0"><BR> </form> </body> </html> --------------------------------------------------------
- ベストアンサー
- JavaScript
プルダウンのメニューを表示を2つ設定。
プルダウンのメニューを表示を2つ設定したいのですが、どこが間違っているのでしょうか。基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
Javascriptでセレクトメニューの選択チェックの方法
Javascriptでセレクトメニューのフォームをチェックしたいのですが、リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=＼"JavaScript＼">  </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>
- ベストアンサー
- JavaScript
セレクトメニューで
セレクトメニューでフレームを使った、複数のセレクトメニューで今の状態だと、上のセレクトメニューは問題ないのですが下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけになってしまいます。要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript">  </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD>
- 締切済み
- JavaScript