- 締切済み
Selectの中身をfor文で入れる
かなり初歩的な質問だと思いますが select文のoptionの値に1~100の数値を入れたいときに JavaScriptではどのように記述すればいいのでしょうか。 ページ読み込み時にはフォームに代入したいので [htmlファイル] <body onload="init()"> ・・・ <form name="f1"> <select name="s1"></select> [jsファイル] function init() { for(i=1; i<=100; i++) document.f1.s1.value=i; } のようにしたのですがうまくいきません。
- oxfax
- お礼率27% (57/209)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
おおむね#1さんのやり方でよいでしょうけど、 せっかくなので細かく調整しました。 jsで外部にスクリプトをおいだすなら、bodyにonloadを書くのは 中途半端でもったいないのでjsに書いてしまった方がよいでしょう。 あとformにnameは非推奨ですのでidでやりましょう。 selectには初期値を設定すればイロイロ考えないですみます。 //sample.js window.onload=function(){init()} function init(){ var f = document.getElementById("f1"); for (var i = 1;i <= 100;i++){ var option = document.createElement("option"); option.setAttribute("value",i); option.appendChild(document.createTextNode(i.toString())); f1.s1.appendChild(option); } } //sample.htm <html> <head> <script type="text/javascript" src="sample.js"></script> </head> <body> <form action="hoge.php" method="get" id="f1"> <select name="s1"> <option value="">選択してください</option> </select> </form> </body> </html>
- Dumper
- ベストアンサー率28% (24/84)
function init() { document.f1.s1.options.length = 0; //初期化 for(i=1; i<=100; i++) { document.f1.s1.options[i-1] = new Option(i,i); } } 前括弧が抜けていました。
- Dumper
- ベストアンサー率28% (24/84)
古いブラウザまで含めての場合や、 後からoptionをオブジェクトとして利用する事があまりないのなら。 function init() { document.f1.s1.options.length = 0; //初期化 for(i=1; i<=100; i++) { document.f1.s1.options[i-1] = new Optioni,i); } } でも十分かな。
お礼
ありがとうございます。 ブラウザなど細かい設定は気にしていないので 今回はこのプログラムでできました。
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q3678812 TestCase 1</title> <script type="text/javascript"> //<![CDATA[ //一応出来る。 //IEを考えなくていいならcreateElementNSを用いる。 //「出来る」のと「適切」なのは //別次元。ECMAscript無効な人には何も表示されないため， //PerlやPHPやRubyのプログラムでXHTMLを生成して //CGI経由でブラウザに送り出す方が満遍なく対応できる。 function selection(){ var div = document.getElementById("sample"); var select = document.createElement("select"); for (var i = 1;i <= 100;i++){ var option = document.createElement("option"); option.appendChild(document.createTextNode(i.toString())); select.appendChild(option); } div.appendChild(select); //折角だから5番目を選択してみる(0から始まるので6が選択される) select.selectedIndex = 5; } //]]> </script> </head> <body onload="selection();"> <!-- select要素は置換インライン要素だったかな？ なのでXHTML 1.0 Strictにおいては，body要素直下には置けない また， <!ELEMENT SELECT - - (OPTGROUP|OPTION)+ > なので，option要素を持たないselect要素も駄目。ECMAscriptが無効なときにも Validになるよう，努力しましょう。 --> <div id="sample"> </div> </body> </html>
関連するQ&A
- 連動セレクトボックスを同一ページにもう一つ追加したい
今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。 説明下手ですみません・・ 例えばですけど htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:"02_11"}, {key:"小樽市",value:"02_12"}, {key:"その他市町村",value:"02_099"}], ["青森", {key:"青森市",value:"03_01"}, {key:"弘前市",value:"03_02"}, {key:"その他市町村",value:"03_099"}], ["岩手県", {key:"盛岡市 ",value:"04_01"}, {key:"宮古市",value:"04_02"}, {key:"その他市町村",value:"04_099"}], ["宮城県", {key:"石巻市",value:"05_06"}, {key:"塩竈市",value:"05_07"}, {key:"その他市町村",value:"05_099"}] ]; この他にもう一つ別窓で <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM2.MENUC.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM2.MENUD.length=0; for(var i=1; i<data[no].length; i++){ document.FORM2.MENUD.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM2"> <select name="MENUC" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUD" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["プログラミング", {key:"HTML",value:"11_01"}, {key:"JavaScript",value:"11_02"}, {key:"その他市",value:"11_099"}], ["データベース", {key:"Oracle",value:"12_01"}, {key:"MySQL",value:"12_02"}, {key:"その他市",value:"12_099"}] ]; と書いたセレクトリストをもう一つ追加したいのです。 が何度やっても上手くいきません。
- ベストアンサー
- JavaScript
- セレクトボックス連動
過去の質問にありましたソースを参考にセレクトボックスの 連動タイプをphpを絡めて作っています。 DBから取出した menua に入る値を初期値に設定したいのですが うまくいきません。 menua には AAA、BBB、CCCが入ります。 初期値を変えるにはどのようにすればいいのでしょうか。 また、menua以外にもmenubの初期値も変える事が出来るのでしょうか。 以下ソースになります。 <? $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.menua.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.menub.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.menub.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="menua" onchange="setSubMenu(this.selectedIndex)"> </select> <select name="menub" > </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- セレクトで選んだ数の計算方法
初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が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"> ５</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
- html onchange
下記のコードでf002は動きますが、f001が動きません。 scriptで作ったオプションメニューもonChangeが働くようにするには、いかがしたらよろしいでしょうか？ <script language="JavaScript"><!-- function f001(){ if (document.test.s1.value==2) alert("2が入力されました"); } function f002(){ if (document.test.s2.value==2) alert("2が入力されました"); } var i,ht=[]; i=0; ht[i] = '<select onChange="f001()" id="s1" >'; for( var i=1; i<=5;) ht[i] = '<option value='+(i)+(i==1?' selected':'')+'>'+(i++)+'</option>'; ht[i] = '</select>'; document.write('s1 =', ht.join('')); // --></script> <form name="test"> s2 = <select onChange="f002()" id=s2> <option value=1 selected>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> </select> </form>
- ベストアンサー
- JavaScript
- for文の使い方について
こんばんはpiyottiと申します。 forループを使用してtextの値を取得したいと思っています。 「document.myFORM.namei・・・」の「i」をループカウンターとして 「name1、name2・・・」と増やしていきたいのですがうまくいきません。 どうかよろしくお願いいたします。 <script Language="JavaScript"><!-- function calc(form) { n = 0; for (i=0; i<4; i= i+;) n += eval(document.myFORM.namei.value); } // --></script> <form name="myFORM"> 数値１：<input type="text" onChange="calc(this.form, this)" name="name1"> 数値２：<input type="text" onChange="calc(this.form, this) name="name2"> 数値３：<input type="text" onChange="calc(this.form, this) name="name3"> 数値４：<input type="text" onChange="calc(this.form, this) name="name4"><br> </form>
- ベストアンサー
- JavaScript
- 読み込む外部スクリプトをセレクトボックスを使って選べないでしょうか？
お世話になります。 フォーム内に配置した、１から５までの数字を選べるセレクトボックスを使って、そのフォーム内に読み込む.jsファイルを選択することは出来ないでしょうか？ 外部ファイルには、UsualSet.js、EmergencySet.js、PauseSet.jsなどがあって、そのスクリプトファイルの中身は document.write("<input name=\"youbi\" type=\"hidden\" value=\"土曜\"><input name=\"codenumber\" type=\"hidden\" value=\"732\"><input name=\"busho\" type=\"hidden\" value=\"経理\">"); とかいった感じになっています。 つまり、セレクトボックスで何番を選ぶかによって、CGIに渡す値を$youbiと$codenumberと$bushoとの３つ全ていっぺんに変更出来るようにしたい訳です。 しかし、そのセレクトボックスにどういう仕掛けをしたら良いかわからなくて困っています。 まさか、 <FORM ACTION="pro.cgi" METHOD="POST"> <select name="kazu"> <option value="<script language="javascript" src="UsualSet.js>" selected>1</option> <option value="<script language="javascript" src="EmergencySet.js>" >2</option> <option value="<script language="javascript" src="PauseSet.js>" >3</option> <option value="<script language="javascript" src="MorningSet.js>" >4</option> <option value="<script language="javascript" src="FulleSet.js>" >5</option> </select> <input type="hidden" name="kaijou" value="22890"> <input type="hidden" name="boxnumber" value="62"> <input type="submit" name="Submit" value="送信"> </FORM> なんてわけに行かないですもんね。 どうしたらいいかおわかりの方がいらっしゃいましたら、どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。
上のセレクトメニューから県名を選ぶと、下のセレクトメニューの項目が市区町村の項目になるようにセレクトメニューを連動させたいです。 また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですがエラーが出てしまいます。。。 htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:02_11}, {key:"小樽市",value:02_12}, {key:"旭川市",value:02_13}, {key:"その他市町村",value:02_099}], ["青森", {key:"青森市",value:03_01}, {key:"弘前市",value:03_02}, {key:"八戸市",value:03_03}, {key:"鳥取",value:213}], {key:"その他市町村",value:03_099}], ["岩手県", {key:"盛岡市 ",value:04_01}, {key:"宮古市",value:04_02}, {key:"大船渡市",value:04_03}, {key:"その他市町村",value:04_099}], ["宮城県", {key:"石巻市",value:05_06}, {key:"塩竈市",value:05_07}, {key:"古川市",value:05_08}, {key:"その他市町村",value:05_099}], ]; と書きましたがjavascript初心者でどこに間違いがあるのか解りません・・ すみませんがご教授のほどよろしくお願いいたします。
- ベストアンサー
- JavaScript
- [JavaScript+<select>]最初から５文字一致でセレクト状態にしたい。
こんばんは。 ＨＴＭＬとＪａｖａＳｃｒｉｐｔで簡単な動的ページを作成しています。 そこで、行き詰っていることがありますのでご相談を・・・。 こういう<SELECT>があるとします・・・。 <FORM name="myform"> <SELECT name="menu"> <OPTION value="item1001">メニュー１</OPTION> <OPTION value="item2001">メニュー２</OPTION> </SELECT> </FORM> 初期値を「メニュー２」にしたい場合・・・これをJavaScriptで指定する場合、ONLOADのタイミングで・・・ document.myform.menu.value = "item2001"; とすればいけます。 今回は・・・"item2"だけの情報でヒットさせたいと思っています。 つまり、optionのvalue値の頭から５桁だけのマッチングでセレクト状態にさせたいのです。 ループという形をとらずにセレクトさせる方法を探しています。 テクニックをご教授下さい・・・。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- for ( i = 0; i ・・の使い方？
下記は普通に動きますが、ラジオボタンの内容をデータベースによって変更しているためボタンが１個だけの場合があります。その場合にもエラーにならない書き方についてアドバイスいただけないでしょうか。 <SCRIPT language=JavaScript> function set( n ) { for ( i = 0; i < document.main.shori.length; i++ ) { if ( document.main.shori[i].checked ) { shori_value = document.main.shori[i].value } } alert(shori_value) } </SCRIPT> <body onLoad="set(0);"> <FORM NAME=main> <INPUT TYPE="RADIO" NAME="shori" VALUE="１" onClick="set(0);" CHECKED>１ <INPUT TYPE="RADIO" NAME="shori" VALUE="２" onClick="set(1);">２ </form>
- ベストアンサー
- 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
お礼
formにnameは非推奨なんですね。 以後気をつけます。 細かいプログラムありがとうございます。