javascriptのselect要素で選択した文字をinputに表示する方法

このQ&Aのポイント
  • javascriptのselect要素で選択した文字をinputに表示する方法について教えてください。
  • IE5.IE6.IE7で動作しない問題があります。どなたか解決策を教えていただけないでしょうか。
  • 最新のブラウザでは動作するプログラムを教えていただきましたが、IE6 IE7では動かないため困っています。
回答を見る
  • ベストアンサー

javascriptについての質問です。複数のselect等で選択した

javascriptについての質問です。複数のselect等で選択した文字の値をinputに表示したいのですが2 こちらで <script> function changeFunc(f){ f.elements["text1"].value=f.elements["select1"].value+f.elements["select2"].value; } </script> <FORM> <SELECT NAME="select1" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" a">a</OPTION> <OPTION VALUE=" b">b</OPTION> <OPTION VALUE=" c">c</OPTION> </SELECT> <SELECT NAME="select2" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" 壱">壱</OPTION> <OPTION VALUE=" 弐">弐</OPTION> <OPTION VALUE=" 参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> というプログラムを教えていただいたのですが 最新のブラウザーではどれもが動作するのですが IE5.IE6.IE7で動かなくて困っております。 IE5は仕方ないカナとも思ってしまったりするのですが IE6 IE7では動いて欲しくて困っています。 どなたか助けていただけないでしょうか

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

http://okwave.jp/qa/q6139169.html ですね IE(6.0.29)で試しましたが、問題なく動作します。 (IE7は手元にないけど、動くと思う) ご提示のままの単純な形のソースで動作しないのでしょうか? (それとも他に何か付け足している?)

mooooooooooooon
質問者

お礼

私の勘違いでした。。。 見ている環境が動作不良を起こしておりました。 素早い回答ありがとうございます。 助かりました。

関連するQ&A

  • javascriptについての質問です。複数の一つのselect等で選

    javascriptについての質問です。複数の一つのselect等で選択した文字の値をinputに表示したいのですが <FORM> <SELECT NAME="select1"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" a">a</OPTION> <OPTION VALUE=" b">b</OPTION> <OPTION VALUE=" c"c</OPTION> </SELECT> <SELECT NAME="select2"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" 壱">壱</OPTION> <OPTION VALUE=" 弐">弐</OPTION> <OPTION VALUE=" 参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> とこの様なフォームがあるとしまして 各SELECT で選択した各文字を <input TYPE="text" NAME="text1" VALUE="">に追加したいんです。 SELECT一つなら出来たのですが 複数になると追加をどうするのかやり方がわからなくて・・・ 一つのセレクトは一つしか選択できなくなればなお良いのですが・・・ どなたがご教授願えないでしょうか?

  • 複数のvalue値を返すには

    Aを選択した時10、Bを選択した時100、Cなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、 Aの時10と20を、Bの時100と200、Cの時1000と2000が もうひとつの<input type="text" name="TEXT2" value="">に表示できるようにするにはどうしたらよいのでしょうか。 記述方法を教えていただければ一番いいのですが、サンプルがあるページでもいいので、教えてください。 <script type="text/javascript"> <!-- function kai(){ document.FORM.TEXT.value = document.FORM.num.value; } //--> </script> </head> <body> <form name="FORM"> <input type="text" name="TEXT" value=""> <select name="num" onChange="kai()"> <option value="10">A</option> <option value="100">B</option> <option value="1000">C</option> </select> </form>

  • inputの数値を参照しselectによる選択肢で決められた数値を表示したい

    JavaScript の素人なもので連続の質問となってしまいました。 下記のように field1 の値を参照し、 selectでの選択肢毎に決められた数値を field2 に表示したいのですが、 どういったscriptにすれば良いか、どなたかご教示をお願い致します。 ┏━━━━━┓ ┃ 例) 150   ┃(必ず1以上の数字が自動で入るinput="text" name="field1") ┗━━━━━┛ (↓ select) ┏━━━━━━┓  ┏━━━━━┓ ┃ 例) イ     ▼┃  ┃ 例) B    ┃(結果を表示させたいinput="text" name="field2" ) ┗━━━━━━┛  ┗━━━━━┛  │ イ │  │ ロ │  │ ハ │  └──┘         (select での選択肢)        │ イ │ ロ │ ハ │ 二 (field1値) │    │    │    │    1 ~100 │ A │ F  │ J  │ O 101~200 │ B │ G  │ K  │ P 201~300 │ C │ H  │ L  │ Q 301~400 │ D │ I  │ M  │ R 401~500 │ E │ H  │ N  │ S ※実装する際にはA~Sは数値になります。 以下に素人ながらのソースを記します。 <script type="text/javascript"> <!-- function selectarea(text) { var total = document.form1.field1.value; var choise = document.getElementById("area"); document.form1.field2.value = text; } // --> </script> <form action="" name="form1"> <table> <tr><td><input type="text" name="field1" size="30" value="150"></td></tr> <tr><td> <select id="area" onChange="selectarea(this[this.selectedIndex].value)"> <option selected="selected">選択して下さい</option> <option value="イ">イ</option> <option value="ロ">ロ</option> <option value="ハ">ハ</option> <option value="二">二</option> </select> </td></tr> <tr><td><input type="text" name="field2" size="30"></td></tr> </table> </form>

  • セレクトで選んだ数の計算方法

    初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が2つあり、その積を表示したいのです。 どうしたらよいでしょうか。 </script> <script langauage="JavaScript"> <!-- function calcNum(){ var num1 = parseInt(document.getElementById('s1').value); var num2 = parseInt(document.getElementById('s2').value); var kei = num1 * num2; } //--> </script> </head> <body> <form name="form1"> <select size="1" name="select2" id="s2" onchange="selectChange()"> <option value="5"> 5</option> <option value="9"> 9</option> </select> </form> <form name="form1"> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2"> 2</option> <option value="12">12</option> </select> </form> <input type="text" name="kei" size="10">  <input type="button" value="計算" onmousedown="calcNum()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、 どのようにしたら良いか、教えてください。 根本的に違っているようでしたら、どうやればよいのか教えてください。 よろしくお願いします

  • JavaScriptの演算について

    計算のプログラムで HP上で電線の長さに応じて金額を出したくて [ meter ] m [ centi ] cm   ↑      ↑ テキストボックス↑          コンボボックス          値は0から90まで10おき  [ nedan ]←ここに金額が自動で計算される (電線は1mあたり40円) このようなものをJavaScriptで作っているのですが、計算が全然違う値になってしまいます。 このサイトで調べてると誤差の問題かなと思ったのですが直し方がまったくわかりません。 プログラムの改善点などあれば教えていただけませんか??できればIEとネスケで動作させたいです。 作ったプログラムはこんな感じです。 <SCRIPT LANGUAGE="JavaScript"> function change(form, val) { meter = val.value    centi = val.value nedan = (meter * 40)+ centi * 4 form.ans.value = nedan ; return false; } </SCRIPT> <FORM NAME="f" onSubmit="return change(this, this.num)"> <INPUT NAME="meter" SIZE="5" ONCHANGE="change(this.form, this)"> m <select name="centi" size="1" ONCHANGE="change(this.form, this)"> <option selected value="0">0 <option value="10">10 <option value="20">20 <option value="30">30 <option value="40">40</option> </select> cm <p>  <INPUT NAME="ans" SIZE="8" ></p> </FORM> 長々とすみません、どうかお願いします。

  • セレクトボックスを使った計算式

    テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、3つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか? とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){     if(option value="+"){     document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </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文を作るところが特にわからず止まっています。 どうかよろしくお願いします。

  • selectのnameが配列の場合

    説明がわかりにくいかもしれませんがよろしくお願いいたします。   セレクトボックスが選択されると、テキストフィールドが変わるというJavaScriptを作成しています。 nameに配列を使った場合、elementsを使用すればいいと言うことまでは分かり1つだけの場合は成功しました。 しかし、同じname(配列)のセレクトボックスとテキストフィールドが複数ある場合は成功しません。 PHPでデータベースに格納する際に、どうしてもセレクトボックスとテキストフィールドは配列にして置かないといけないのですが、この場合どうすれば、成功するでしょうか? 現在以下のようにソースを書いて失敗しています。 ご教授の程よろしくお願いいたします。 ↓↓JavaScript部分 <script> function selectChange(){ var no = document.test1.elements['member[]'].selectedIndex; if(no==1){ document.test1.elements['point[]'].value =0; } else{ document.test1.elements['point[]'].value =""; } } </script> ↓↓HTML部分 <form name='test1'> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> <br> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> </form> //bbbの場合だけ、テキストフィールドのデフォルト値を0にしたい

  • 2つのセレクトボックスで選択した組み合わせの結果

    社内で個人的に使うためのツールを Google Sites で作成中なのですが、 できれば、セレクトボックスの組み合わせの結果はテキストではなく、 条件に一致した結果でのフローをまとめた画像やGoogleスライドを指定して、 各条件ごとに振り分けて表示させたいと考えています。 ネットで色々と検索しながら試行錯誤した結果、 <textarea> に画像やスライドを反映するのは不可と判断しておりますが、 なにか別の要素を指定することで可能な場合や、 その他に可能な方法があればご教示いただけますと幸いです! コードは下記です。 </head> <!-- javascriptファイル --> <script type="text/javascript"> function check(f){ var arr={ "A":{"aaa":"Aとaaaを選択しました","bbb":"Aとbbbを選択しました"} ,"B":{"aaa":"Bとaaaを選択しました","bbb":"Bとbbbを選択しました"} }; var select1=f.elements["select1"].value; var select2=f.elements["select2"].value; f.elements["C"].value=(arr[select1] && arr[select1][select2])?arr[select1][select2]:""; } </script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <body> <p class="title">該当する組み合わせを選択してください。</p> <form> <div class="cp_ipselect cp_sl01"> <select name="select1" onchange="check(this.form);"> <option value="">------ 選択肢①を選択してください ------</option> <option value="A">A</option> <option value="B">B</option> </select> </div> <div class="cp_ipselect2 cp_sl02"> <select name="select2" onchange="check(this.form);"> <option value="">------ 選択肢②を選択してください ------</option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> </select> </div> <p class="title2">選択肢①と②の組み合わせの結果</p> <!-- 下の textarea 箇所に各組み合わせごとにテキストではなく、画像やスライドを表示したいです --> <textarea name="C"></textarea> </form> </div> </body> </html>

  • 複数のjavascript

    うまく説明できないのですが、 プルダウンメニューが1つならエラーは出ないのですが、 下記のようにプルダウンメニュー2つにするとエラーが出てしまいます。。 どのように分ければエラーが出ないでしょうか・・・? 出来ればスッキリした形がベストなんですが・・・。 どうか宜しくお願い致します。 ------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>step25</title> <META http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <script launguage="JavaScript"> <!-- function openlink(){ var n = document.f1.links.selectedIndex; if(n!=0){ location.href = document.f1.links.options[n].value; } } --> </script> </head> <body> <FORM name="f1"> <H2>美術館&博物館のリンク集</H2> <select name="links" onChange="openlink()"> <option>リンク先を選択</option> <option value="http://www.momat.go.jp">1111</option> <option value="http://www.momak.go.jp">2222</option> <option value="http://www.nmwa.go.jp">3333</option> <option value="http://www.tnm.go.jp">4444</option> <option value="http://www.kyohaku.go.jp">5555</option> <option value="http://www.narahaku.go.jp">6666</option> </select> <select name="links" onChange="openlink()"> <option>リンク先を選択</option> <option value="http://www.momat.go.jp">1111</option> <option value="http://www.momak.go.jp">2222</option> <option value="http://www.nmwa.go.jp">3333</option> <option value="http://www.tnm.go.jp">4444</option> <option value="http://www.kyohaku.go.jp">5555</option> <option value="http://www.narahaku.go.jp">6666</option> </select> </FORM> </body> </html> ------------------------------------------------------------

  • JavaScriptで、SELECTの値で、TEXTを入力可と入力不可

    JavaScriptで、SELECTの値で、TEXTを入力可と入力不可に分けたい。 現在、以下のフォームを作成しています。 <form method="post" action="/" name="formname"> <select name="test[0]" size="1" onchange="selectChange(0)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <select name="test[1]" size="1" onchange="selectChange(1)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <br> <input name="txt[0]" type="text" value="" size="10"> <br> <input name="txt[1]" type="text" value="" size="10"> </form> このフォームで、例えば、selectのtest[0]でvalueの「C」が選択された場合、 txt[0]が入力できないようにしたいと考えています。 また同様に、test[1]でvalueの「C」が選択された場合は、txt[1]が入力出来ないように したいです。 以下のようなJavaScriptを書きましたが、上手く動きません。 function selectChange(value) { var answer = document.formname.elements["test[value]"].selectedIndex; if(answer == "C") { document.formname.elemens["txt[value]"].disabled = false; } else { document.formname.elemens["txt[value]"].disabled = true; } } どなたか教授頂けましたら、幸いです。 よろしくお願いします。

専門家に質問してみよう