- ベストアンサー
SELECTボックスの内容を動的に変えるには
2つのSELECTボックスを用意し、1つ目のSELECTボックスの内容により 2つめのSELECTボックスの内容（項目数も含め）を変える方法を教えてください。 下記のようなHTMLを作ってみましたが、2つ目のSELECTボックスに項目がないため「オブジェクトがありません」のエラーが出ます。 ------------------------------------------------------- <html> <head> <SCRIPT language="vbscript"> <!-- option explicit sub selchng() dim strsel strsel = sel1.selectedIndex Select Case strsel Case "1" sel2.item(0).value = "1" sel2.item(0).text = "1" sel2.item(1).value = "2" sel2.item(1).text = "2" Case "2" sel2.item(0).value = "a" sel2.item(0).text = "a" sel2.item(1).value = "b" sel2.item(1).text = "b" sel2.item(2).value = "c" sel2.item(2).text = "c" Case else sel2.item(0).value = "A" sel2.item(0).text = "A" End Select end sub --> </SCRIPT> </head> <body> <select name="sel1" onchange=selchng()> <option value="1" selected>1</option> <option value="2" >2</option> <option value="3" >3</option> </select> <select name="sel2"> </select> </body> </html>
- kmor
- お礼率90% (255/283)
- Microsoft ASP
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1の方と同じですがVBScript版です。 strsel = sel1.selectedIndex はセレクトボックスの順番で取得（0～） この場合Caseの設定は case 0 case 1 case 2 となる sstrsel = el1.value にするとオプションのValue値から取得 この場合Caseの設定は case "1" case "2" case "3" となる <html> <head> <SCRIPT language="vbscript"> <!-- option explicit sub selchng() dim strsel strsel = sel1.value Select Case strsel Case "1" sel2.options.length = 2 sel2.options(0).value = "1" sel2.options(0).text = "1" sel2.options(1).value = "2" sel2.options(1).text = "2" Case "2" sel2.options.length = 3 sel2.options(0).value = "a" sel2.options(0).text = "a" sel2.options(1).value = "b" sel2.options(1).text = "b" sel2.options(2).value = "c" sel2.options(2).text = "c" Case else sel2.options.length = 1 sel2.options(0).value = "A" sel2.options(0).text = "A" End Select end sub --> </SCRIPT> </head> <body> <select name="sel1" onchange=selchng()> <option value="1" selected>1</option> <option value="2" >2</option> <option value="3" >3</option> </select> <select name="sel2"> </select> </body> </html>
その他の回答 (2)
- mirurin
- ベストアンサー率43% (48/111)
Case "1" の後に sel2.options.length = 2 Case "2" の後に sel2.options.length = 3 Case else の後に sel2.options.length = 1 を挿入してオプション要素の数を指定してやればできます。
お礼
ありがとうございます。試してみます。
VBの関数が解らないのですが以下のソースなら動きます… 単に「sel2.length」のような指定をしていない可能性って無いですかね？ <html> <head> <SCRIPT language="JavaScript"> <!-- // function func(zzzz){ switch(zzzz.sel1.selectedIndex){ case 0: zzzz.sel2.length = 2; zzzz.sel2.options[0].value = "1" ; zzzz.sel2.options[0].text = "1" ; zzzz.sel2.options[1].value = "2" ; zzzz.sel2.options[1].text = "2" ; break; case 1: zzzz.sel2.length = 3; zzzz.sel2.options[0].value = "a" ; zzzz.sel2.options[0].text = "a" ; zzzz.sel2.options[1].value = "b" ; zzzz.sel2.options[1].text = "b" ; zzzz.sel2.options[2].value = "c" ; zzzz.sel2.options[2].text = "c" ; break; case 2: zzzz.sel2.length = 1; zzzz.sel2.options[0].value = "A" ; zzzz.sel2.options[0].text = "A" ; break; } } // --> </SCRIPT> </head> <body onLoad="func(ffff)"> <form name="ffff"> <select name="sel1" onchange="func(ffff)"> <option value="1" selected>1</option> <option value="2" >2</option> <option value="3" >3</option> </select> <select name="sel2"> </select> </form> </body> </html>
お礼
ありがとうございます。試してみます。
関連するQ&A
- 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>
- ベストアンサー
- JavaScript
- セレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい
web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。 1. topページにセレクトボックスを設置。 2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。 3. 2を繰り返す。 このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。 script_test01.htmlの内容 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body> <script type='text/javascript' src='script_test01.js'> </script> <br> <form name='form_0'> <select onchange='rewrite()' name='sel_0'> <option>A or B</option> <option>A</option> <option>B</option> </select> </body> </html> -------------------------------------------------- script_test01.jsの内容 -------------------------------------------------- function rewrite() { var sel_in =document.form_0.sel_0.options.selectedIndex; var sel_name = document.form_0.sel_0.options[sel_in].text; document.write('<html>\n'); document.write('<head>\n'); document.write('<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">\n'); document.write("<script type='text/javascript' src='script_test01.js'>\n"); document.write("</script>\n"); document.write('</head>\n'); document.write('<body>\n'); document.write(sel_in,' : ',sel_name,'<br>\n'); /* ↓この部分がうまくいかない document.write('<br>\n'); document.write('<form name='form_0'>\n'); document.write('<select onchange='rewrite()' name='sel_0'>\n'); document.write('<option>A or B</option>\n'); document.write('<option>A</option>\n'); document.write('<option>B</option>\n'); document.write('</select>\n'); /* ↑この部分がうまくいかない document.write('</body>\n'); document.write('</html>\n'); } -------------------------------------------------- script_test01.jsのコメントアウトをはずすとエラーになります。 script_test01.js内でさらに自分自身を記述している部分辺りなど、なにかおかしなことをやっていのではという自覚はありますが、よくわかりません。 あわせて質問ですが、.htmlと.jsはEUCで作成しcharsetもEUC-JPを指定しています。 topページをブラウザのエンコードで確認すると当然「日本語[EUC]」となっていますが、セレクトボックス選択後書き換えられたページを確認すると、「Unicode」なっていますがなぜでしょうか？「日本語[EUC]」に出来ないでしょうか？
- ベストアンサー
- JavaScript
- 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
- 選択ボックス内の並び換えをしたい。
まずは、下のＨＴＭＬをご覧ください。 ------------------------------------------------- <HTML> <HEAD><TITLE>TEST</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function defaultSet() { // ここで初期値(ITEM01)に戻す処理。 } //--> </SCRIPT> </HEAD> <BODY> <FORM NAME="FR01"> <SELECT NAME="p_youto" SIZE="1"> <option>ITEM01</option> <option>ITEM02</option> <option>ITEM03</option> <option>ITEM04</option> <option>ITEM05</option> <option>ITEM06</option> <option>ITEM07</option> </SELECT><INPUT TYPE="BUTTON" NAME="B1" VALUE="初期値に設定" ONCLICK="defaultSet()"> </FORM> </BODY> </HTML> ------------------------------------------------- このＨＴＭＬファイルを起動しますと、選択ボックスとボタンが 表示されます。そしてボタンを押されたときに、JavaScriptの処理で データの並び＆表示を初期値の状態(一番上がITEM01で、一番下が ITEM02)にし、なおかつテキスト表示される部分には"ITEM01"を表示するようにしたいのですが、 JAVASCRIPTをどのように処理させればよろしいでしょうか？
- ベストアンサー
- JavaScript
- [Ethna]selectボックスに空値を入れたい
PHPフレームワークのEthnaにて、フォームヘルパーを使用してselectボックスを作成しています。 このselectボックスに空の値を先頭に入れたいと考えていますが、方法が見つからなかったため、教えていただきたいです。 --↓のようにしたい-- <select> <option></option> <option value="1">AAA</option> <option value="2">BBB</option> <option value="3">CCC</option> </select> --------------------- アクションフォームの$formメンバ内の、typeやform_typeなどのオプションの箇所に何か追加するだけで実現できたら非常に楽なのですが。。。（cakephpはそんな感じで空行を入れられる） よろしくお願いします。
- 締切済み
- PHP
- selectボックスで選択数を制限したい
入力画面を作成しています。 この画面に、複数選択可能なselectボックスを配置したいと思っています。 この時、選択できる個数を制限したいのですがどのようにすればよいでしょうか？ <select multiple size="3" name="test"> <option value="" selected></option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> <option value="5">E</option> <select> 初期値が「""」となっており、selectボックスで何も選択せずに登録することも可能で、 何か選択された時は、最大3つまでしか選択できないようしたいと思っております。 そして、最大3つまでしか選べようにした上で、その3つの中に初期値の「""」が含まれていた場合はメッセージを表示させる。 以上の事をやりたいのですが、どのようにすれば良いでしょうか？ 助けてください。よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <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文を作るところが特にわからず止まっています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- 計算された値をselectboxにselectedしたい
セレクトボックスAとセレクトボックスBの選択された値を加算し、その値をセレクトボックスCにselectedしたいです。 計算はできているので後は、セレクトボックスCにselectedするだけですが、その方法がわかりません。 言語はJavascriptとHTMLです。 ご回答お願いします。 現状のソースコードは以下のとおりです。 なお、セレクトボックスAとセレクトボックスBの<option>タグの中身は省略(0～23までの数値)します。 <ソースコード> <html> <head> <script type="text/javascript"> function schedule_end_time(){ var val1=parseInt(document.form1.schedule_start_jikan.value,10); var val2=parseInt(document.form1.work_jikan.value,10); var val3=val1+val2; </script> </head> <body> <form method="GET"> <td><select name="schedule_start_jikan" onchange="schedule_end_time()"></select></td> セレクトボックスA <td><select name="work_jikan" onchange="schedule_end_time()"></select></td> セレクトボックスB <td><select name="schedule_end_jikan"><option value="ここをセレクトボックスAとセレクトボックスBの合計にしたい" selected>××</option> </form> </body> </html>
- 締切済み
- JavaScript
- selectボックスの選択結果を変数に代入したい
質問No.8512768の追加質問です。 先ほど同じ内容をOgre7077さんの補足に入れて投稿してしまいました。 LancerVIIさん、Ogre7077さん ご丁寧な説明を頂き、ありがとうございます。 LancerVIIさんのスクリプトを使ってセレクトボックスの表示内容は完成しました。すごく簡潔になりました。 それに追加してOgre7077さんの内部処理のスクリプトを入れてみましたが、 alertで月名がうまく表示出来ません。 セレクトボックスで月をセレクトした直後にその年月のカレンダーを表示させたいので月のセレクトボックスにもonhangeを追加しました。 勉強不足で大変申し訳ありませんが、下記スクリプトの添削をよろしくお願いします。 <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <style> </style> <script> var monthArray = new Array(); monthArray['y2014'] = new Array ( 1, 2, 3, 4 ); // 2014年が選択された場合に表示する月 monthArray['y2013'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); // 2013年が選択された場合に表示する月 monthArray['y2012'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2011'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2010'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2009'] = new Array ( 10, 11, 12 ); // 2012年が選択された場合に表示する月 function getSelectedText(obj) { var year = obj.options[obj.selectedIndex].value; // 選択された年を取得 var monthObj = document.getElementById('month'); // 月表示用のオブジェクトを取得 if ( year === '' ) { monthObj.length = 1; // 「----」が選択された場合は選択をクリアして処理終了 return; } var month = monthArray['y'+year]; // 年で表示月を取得 monthObj.length = month.length+1; // option用の領域を広げる for ( var i = 0; i < month.length; i ++ ) { monthObj.options[i+1].text = month[i]; // 取得した表示月の分、optionを追加する monthObj.options[i+1].value = month[i]; // 先頭には「--」が存在するためi+1から追加 } monthObj.options[0].selected = true; // 先頭の「--」を選択状態とする } </script> <body> <select name="year" onchange="getSelectedText(this);"> <option value="">----</option> <option value="2014">2014</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> </select><a>年 </a> <select name="month" id="month" onchange="goCalender(this);"> <option value="">--</option> </select><a>月</a> <script>/* function getSelectedText(obj){ var opt = obj.options[obj.selectedIndex]; goCalender.year = opt.text; goCalender(); } function goCalender(obj){ var me = arguments.callee; var selYear = me.year; var selMonth = me,month; alert(selYear + selMonth); }*/ </script> </body> </head> </html>
- ベストアンサー
- JavaScript
- Stack overflow line at:0のエラーについて
はじめまして。 先日も質問させていただき、見事に解決できたのでまた質問させていただきます。 タイトルにもあるのですが、連動プルダウンを使用したJavascriptでエラーが出てしまいます。ネットでも色々と調べ呼び出しのメモリが不足している、キャッシュが多いなど載っていましたが、どうもPCそのものの問題ではないようです。 それ以外では構文のエラーということだったのでフリーソフトのエラーチェックを行ったのですが、特に問題はなかったです。 プルダウンは全部で20個あり初めの4個は選択後に次のプルダウンに移行すると必ずStack overflowのエラーがでます。 不躾な質問で申し訳ないですが、何か問題があるのかご教授いただけないでしょうか？ よろしくお願いします。 以下は構文になります。 <html> <head> <title>テンプレtest</title> <script type="text/javascript"src="ConnectedSelect.js"></script> <script> function Jump(f){ for(var i=0;i<f.length;i++){ if(f[i].type=="select-one" && f[i].value.match(/\.html?$/)){ window.open(f[i].value,'_blank'); break; } } } </script> </head> <body> <form> 項目1<select name="SEL1"> <option value="">-----------</option> <option value="aa">aa</option> </select> 項目2<select name="SEL2"> <option value="">-----------</option> <optgroup label="aa"> <option value="aa1">aa1</option> <option value="aa2">aa2</option> <option value="bb1">bb1</option> </optgroup></select> ・ ・ ・ ・ 項目20<select name="SEL20"> <option value="">-----------</option> <optgroup label="zz"> <option value="zz1">zz1</option> <option value="zz2">zz2</option> <option value="***.html">***</option> </optgroup></select> <input type="button" value="Go" onClick="Jump(this.form)"> <script type="text/javascript">ConnectedSelect (['SEL1','SEL2','SEL3','SEL4','SEL5','SEL6','SEL7','SEL8','SEL9','SEL10','SEL11','SEL12','SEL13','SEL14','SEL15','SEL16','SEL17','SEL18','SEL19','SEL20']); </script> </form> </center> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございました。試してみます。