selectタグ数の初期化方法を教えてください
- selectタグ数を一括で初期化する方法を教えてください。
- 初期化したいselectタグのIDは「middle＋数字」となっており、数字の部分をループさせたいです。
- 試した方法としては、forループ内でeval関数を使用してみましたが、うまくいきませんでした。
- ベストアンサー
selectタグの数の初期化（繰り返し処理）
Javascript勉強中です。 selectタグ数を初期化をするにあたり、 下記の４つの処理を繰り返し処理で一括にしたいのです。 document.estimateEnter.middle1.length = 1; document.estimateEnter.middle2.length = 1; document.estimateEnter.middle3.length = 1; document.estimateEnter.middle4.length = 1; ■HTML <SELECT NAME="category[]" id="middle1"> <option> ～ </SELECT> <SELECT NAME="category[]" id="middle2"> <option> ～ </SELECT> ～ ID値を、「middle＋数字」としています。 数字の部分を、i変数でうまくループさせたい。 「middle*」を「i」にしてforループさせようとしても、うまくいきません。 for (var i = 0; i < middle.length; i++) { document.estimateEnter.eval("middle"+ i ).length = 1; } evalをつかってやってみたのですが、うまくいきません。 selectタグの数はつねにかわるので、動的にしておく必要があります。 対処方法がわかる方、おしえてください。
- hide_momiji
- お礼率52% (307/588)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
変数ｉの型が整数（ｉｎｔ）なのがうまくいかない原因です。 まぁ、この類のパターンの時は、文字列を連結する時に、 "middle"+String.valueOf(i) とやってやります。 String.valueOf(i)は、数値型のiを文字列に変換してくれるものです。 さらに、eval()は、ループ内の式全体に対して実行する必要があると思います。 eval("document.estimateEnter.middle"+String.valueOf(i)+".length=1;"); となるかな。
その他の回答 (1)
- amanojaku1
- ベストアンサー率54% (265/488)
<html> <head> <meta http-equiv="Content-Type" content="Text/HTML; charset=Shift_JIS"> <title>Select</title> </head> <body bgcolor="#8f9fff" text="#000000" link="#2f2fff" vlink="#d700d7" alink="#00ffff" onLoad="BodyLoad( )"> <!-- ↑「onLoad="BodyLoad( )"」を設定している。--> <script language="JavaScript"> <!-- // 「onLoad="BodyLoad( )"」の設定で、HTML の読み込みが完了したら実行される。 function BodyLoad( ){ N= 2; // ループする個数 for( i = 1; i<=N; i++ ){ sElementName = "middle"+i; // alert("<"+sElementName+">") oElementArray = document.getElementsByName(sElementName); // ↑同名の要素が複数存在しても良い様に配列で返される。 // ID 要素の getElementById なら１つに限定される(配列ではない)。 // 良く見ると getElementsByName には Element"s" と "s"が付いてますね。 oElement = oElementArray[0]; // １つしか存在しないので０番目の要素を取得する。 oElement.length = 1; } } // --> </script> <p>犬：<br> <select name="middle1"> <option value="A">ピッシャー</option> <option value="B">シュナウザー</option> <option value="C">モロシアン</option> <option value="D">テリア</option> <option value="E">スピッツ</option> </select></p> <p>猫：<br> <select name="middle2"> <option value="A">メインクーン</option> <option value="B">ラグドール</option> <option value="C">ノルウェージャンフォレスト</option> <option value="D">アビシニアン</option> <option value="E">マンチカン</option> </select></p> </body> </html>
お礼
ありがとうございます。 こういうやり方もあるんですね。 勉強になりました。
関連するQ&A
- ドコモのSELECTタグ
ドコモのXHTMLのサイトを作っていますが、 １ページ内のSELECTタグの上限はありますでしょうか？ SA700iでは１５個しか表示されませんでした。 また、これは端末毎に違ってくるのでしょうか？ --------------------------------------------- <form> <select name=test1><option value=1></select> <select name=test2><option value=1></select> <select name=test3><option value=1></select> ・ ・ ・ <select name=testn><option value=1></select> </form> --------------------------------------------- 宜しくお願いします。
- ベストアンサー
- HTML
- selectタグの項目を制御する
フォーム内のプルダウンの項目を制御する方法がわからなくて困っています。 form1というフォーム内にプルダウンが3つあります。 <select name="select_1"> <option value="AAA">AAA</option> <option value="BBB">BBB</option> <option value="CCC">CCC</option> </select><br/> <select name="select_2"> <option value="AAA_1">AAA_1</option> <option value="AAA_2">AAA_2</option> <option value="BBB_1">BBB_1</option> <option value="CCC_1">CCC_1</option> </select><br/> <select name="select_3"> <option value="AC">AC</option> <option value="AB">AB</option> <option value="B_1">B_1</option> <option value="B_2">B_2</option> <option value="B_3">B_3</option> </select><br/> ●まず、select_1がAAAなら、select_2でAAA_1とAAA_2のみ選択できるようし、select_2で、AAA_1が選択されたらselect_3にACをAAA_2が選択されたらABを表示。 ●select_1でBBBが選択されたら、select_2にBBB_1のみを表示し、変更不可にする。そして、select_3にABC,B_1,B_2,B_3を表示。 ●select_3でCCCが選択されたら、select_2にCCC_1のみを表示して変更不可にし、select_3にACのみを表示して変更不可にする。 こんな感じにしたいのですが、どうもうまく出来ません。 考えたのは、各selectタグにonchange=change_1(form1)として、関数を呼び出し、 no= form1.select_1.selectedIndex; noが0なら thisForm.select_2.length = 2; //オブジェクトを2にする thisForm.select_2.options[0].value = "AAA_1"; の様にしたのですが、はじめに表示したoptionを消したりする方法や変更不可にする方法ってあるんでしょうか？また、ほかの方法など、どなたかわかる方がいましたら、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- excel vba でのSELECTタグの処理方法
Excel VBAを使って、ＩＥのSELECTタグを設定しようとしましたが、実行エラー"438"が出てしまいました。 ＩＥのSELECTタグを参考にしたのは、 http://www.ken3.org/vba/backno/vba154.html HTMLを、解析した所 <select name="place_order">となっていましたので 自分が書いたコードを、次のようにしました。 'SELECTタグに付いた名前(Name)がplace_order上から６番目(5)をテストでセット '.SelectedIndexに5をセット(012345で6番目となる) ie.Document.all.place_order.SelectedIndex = 5 これに対する対応方法をご教示下さい。
- ベストアンサー
- オフィス系ソフト
- javascriptでselectボックスの<OPTION>要素数の取
javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。 データが1件の場合、複数件の場合とで分けて、 <OPTION>要素数を取得する処理を記述していますが、 データが1件の場合、 document.getElementsByName("sel").length で正しい値が取得できません。 詳しくは下記のソースを参照していただきたいのですが、 (1)、(2)、(4)は、正しい値'5'ですが、 (3)だけ誤った値'1'になります。 これはなぜでしょうか？ javascript初心者のため、初歩的な質問かもしれませんが、 教えていただけたら嬉しいです。 よろしくお願い致します。 -------------------------------------- <HTML> <HEAD> <SCRIPT language="JavaScript"> function getSelLen(){ var oForm = document.form1; var sObj; var sObj2; //チェックボックスの数でデータが複数件か1件か判別しています。 if(oForm.chk.length){ //データが複数件の場合 for ( var i = 0; i < oForm.chk.length; i++ ) { sObj=document.getElementsByName("sel")[i]; alert("(1) "+ sObj.length); //・・・・(1) 正 sObj2=oForm.elements["sel"][i]; alert("(2) "+ sObj2.length); //・・・・(2) 正 } }else{ //データが1件の場合 sObj=document.getElementsByName("sel"); alert("(3) "+ sObj.length); //・・・・(3) 誤 sObj2=oForm.elements["sel"]; alert("(4) "+ sObj2.length); //・・・・(4) 正 } } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <TABLE> <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR> <!-- 複数件の場合 以下のコメントアウトを解除する --> <!-- <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR> --> </TABLE> </FORM> <FORM name="form2"> <INPUT type="button" onClick="getSelLen()" value=" selectの要素数 "> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- netscape4.7でselectタグが表示されません
お願いします。 netscape4.7でselectタグが表示されません。optionの部分が横に並んで表示されてしまいます。IEやNN6.2だと問題なく表示できるのですが。ちなみにタグ辞典にはNN4.7でも使えるようなことが書いてありました。 <html> <head> <title></title> </head> <body> test<br> <select name="s1" > <option value="takagi">takagi</option> <option value="suzuki">suzuki</option> <option value="tanaka">tanaka</option> </select> </body> </html> よろしくお願い致します。
- ベストアンサー
- HTML
- ループ処理
HTMLのID属性、name属性をループで回したいと 考えています。 ***イメージ*** <TABLE> <TR> <?php $count = 0; for($a = 0; $count < 20;$count++){ ?> <TD> <SELECT id = "ABC" name = "Nuryoku[]"> print "<option value =<?php echo $count?>$count</option>"; </SELECT> </TD> </TR> SELECTとOPTIONタグが２０個必要であり、それぞれ ID属性のABCを１～２０、name属性Nuruyoku[]を１～２０ ループでまわしたいと考えています。 (例) ABC1 Nuruyoku1[] から ABC20 Nuruyoku20[] このような事が可能なのでしょうか？ もし可能であればアドバイスをよろしくお願い致します。
- ベストアンサー
- PHP
- XSLの中でHTMLタグが使えない
XMLとXSLTを使って、Formの中のListのオプションを、XML から取ってきたいと思ってます。イメージ的には、下記 の○○○の中に、<xsl:value-of select="."/>を入れる ことによって、<option value="<xsl:value-of select="."/>"><xsl:value-of select="."/></option> の様にしたいのですが、<や>を<や>に変えても、 うまく表示されません。また、Selectタグの属性の Multipleも＝サインが無いとかで使えませし,Inputタグ も、終了タグが無いため使えませんでした。どのように 対処したら良いのでしょうか？よろしくお願いしま す。 <select name="list1" size="10" id="select5"> <xsl:apply-templates/> </select> <xsl:template match="//name"> <option value="○○○">○○○</option> </xsl:template>
- 締切済み
- XML
- Selectボックスの幅を自動で広げたい
Selectボックスの幅を自動で広げたい Jqueryを使って、DBから取得した値を下記のようにSelectボックスに入れています。 $('select#name).prepend('<option value="' + val[1] + '">' + val[2] + '</option>'); HTMLの方は下記のように設定してあり、 <select id="name"> </select> 値もきちんと挿入されます。 ただ、値が入ったあとのSelectボックスの幅が狭くて、選択した後に全部表示されていない状態です。 これを入れた値の文字数に応じて、またはこのSelectボックスが複数あるのですが、最大文字数に合わせた幅に自動で設定するのにはどうやってやればいいのでしょうか。 下記のように試してみたのですが、うまくいきませんでした。 <select id="name" style="width:auto;"> </select> <select id="name" style="width:100%;"> </select> どなたかおわかりの方いらっしゃいましたら教えてください、 よろしくお願い致します。
- ベストアンサー
- AJAX
- ブラウザの戻るボタンを押したときのデータの保持の仕方
頻繁に書き込みして申し訳ありません。 どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 前回セレクトメニューについて教えて頂いたのですが、今回もセレクトメニューに関しての質問です。 ＩＥでの話なのですが、セレクトメニュー１・２を選択しsubmitボタンで次のページに行き、 ブラウザの戻るボタンで戻ってきたときにセレクトメニュー２の方のデータ（value）だけ保持できていません。 前にＩＥはそのような仕様だという話を聞いたのですが、その時もこちらで質問させてもらいました。 その時はselectタグにidを仕込んでおき、「window.onload」でgetElementByIdを使用するやり方を 教わったのですが、今回はそれでうまくいきません。 ネットで検索していてcookieを使用してデータを保持しておくというやり方も見かけたのですが、 一番効率のよいやり方はどのようなものになるのでしょうか。 どうかよろしくお願いします。 以下ソースとなります。 <html> <head> <title>テストテスト</title> <script language="JavaScript"><!-- menuItem = [ [ ], ["あああ","あああ２","あああ３","あああ４","あああ５"], ["いいい","いいい２"], ["ううう","ううう２","ううう３"], ["えええ","えええ２","えええ３","えええ４"] ]; function clearOption(len){ var i; for (i=0; i<len; i++){ document.aaa.bbb.options[i] = null; } } function setMenuItem(n){ optlen = document.aaa.bbb.options.length; while(optlen > 0){ clearOption(optlen); optlen = document.aaa.bbb.options.length; } if (menuItem[n].length > 0){ for (i=0; i<menuItem[n].length; i++){ document.aaa.bbb.options[i] = new Option(menuItem[n][i],menuItem[n][i]); for( j=1; j<=4; j++ ){ if( document.aaa.Maker.selectedIndex == [j] ){ document.aaa.bbb.options[i].value = i+([j]*10); } } } } } window.onload = function(){ setMenuItem(document.getElementById('q1').value); //alert(document.getElementById('q2').value); } // --></script> </head> <body> <form name="aaa" action="./next.html" method="POST"> <select name="Maker" id="q1" onChange="setMenuItem(this.selectedIndex)"> <option value="" selected>--- 選択してください ---</option> <option value="1">ひとつ</option> <option value="2">ふたつ</option> <option value="3">みっつ</option> <option value="4">よっつ</option> </select> <select name="bbb" id="q2"> <option value="" selected>--- 選択してください ---</option> </select> <input type="submit" name="ok" vakue="ok"> </form> </body> </html>
- ベストアンサー
- 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
お礼
ありがとうございます。 eval("document.estimateEnter.middle"+String.valueOf(i)+".length=1;"); では動きませんでしたが、 eval("document.estimateEnter.middle"+i+".length=1;"); で動きました。 式全体をevalでくくる、というのがポイントだったようです。 ヒントになりました。 勉強します。ありがとうございました。