プルダウンの選択値により活性・非活性化したい

2023/08/09 11:26

このQ&Aのポイント

プルダウンの選択値により他のプルダウンメニューやテキストエリアを活性・非活性化したい
OSのプルダウンがWindows以外ならば他の要素を非活性化させたい
具体的には、WindowsのバージョンのプルダウンやWindowsのサービスパックのテキストエリアを活性化・非活性化したい

ベストアンサー

プルダウンの選択値により活性・非活性化したい

2010/03/05 18:37

プルダウンの選択値によりその他のプルダウンメニューやテキストエリアを活性・非活性化したいです。下記の例では「OS」のプルダウンが「Windows」と選択されたならば、「Windowsのバージョン」のプルダウンや「Windowsのサービスパック」のテキストエリアを活性化させ、OSのプルダウンがWindows以外ならば非活性化させたいのですが、どのようにすれば実現可能でしょうか <html> <head> </head> <body> <table> <tr> <td>OS</td> <td><select id="IDOS"> <option value="">-</option> <option value="Windows">Windows</option> <option value="Mac">Mac</option> <option value="Linux">Linux</option></select> </td> </tr> <tr> <td>Windowsのバージョン</td> <td><select id="IDVersion"> <option value="">-</option> <option value="XP">XP</option> <option value="Vista">Vista</option> <option value="7">7</option></select> </td> </tr> <tr> <td>Windowsのサービスパック</td> <td><input type="text" value="" size="30"> </td> </tr> </table> </body> </html>

gdcootie
お礼率18% (5/27)

JavaScript
回答数2
ありがとう数4

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

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2010/03/07 12:52 回答No.2

あ～あ、マルチポストするから回答がわかれましたね・・・グレーを強調するならこんなかんじ（とりあえず赤くしときます） <style> :disabled,.disabled{ background-Color:red; } select,input{ behavior:expression( this.className=this.disabled?"disabled":"" ) } </style> <script> function changefunc(){ var os=document.getElementById("IDOS"); var f=os.form; for(var i=0;f.length;i++){ if(f[i]!=os) f[i].disabled=(os.value!="Windows"); } } window.onload=changefunc; </script> <form> <select id="IDOS" onchange="changefunc()"> <option value="">-</option> <option value="Windows">Windows</option> <option value="Mac">Mac</option> <option value="Linux">Linux</option> </select> <select id="IDVersion"> <option value="">-</option> <option value="XP">XP</option> <option value="Vista">Vista</option> <option value="7">7</option></select> <input type="text" value="" size="30"> </form>

その他の回答 (1)

yambejp
ベストアンサー率51% (3827/7415)

2010/03/05 21:42 回答No.1

こういうこと？ <script> function changefunc(){ var os=document.getElementById("IDOS"); var f=os.form; for(var i=0;f.length;i++){ if(f[i]!=os) f[i].disabled=(os.value!="Windows"); } } window.onload=changefunc; </script> <form> <select id="IDOS" onchange="changefunc()"> <option value="">-</option> <option value="Windows">Windows</option> <option value="Mac">Mac</option> <option value="Linux">Linux</option> </select> <select id="IDVersion"> <option value="">-</option> <option value="XP">XP</option> <option value="Vista">Vista</option> <option value="7">7</option></select> <input type="text" value="" size="30"> </form>

関連するQ&A

プルダウンの値によって活性・非活性をするには
プルダウンの値によって他のプルダウンやテキストエリアを非活性にするにはどのようにすればよいでしょうかまったく思いつきません。やりたいことは以下の通りです。「OS」の値をWindowsと選択「Windowsのバージョン」→活性化「Windowsのサービスパック」→活性化「OS」の値にWindows以外を選択「Windowsのバージョン」→非活性化「Windowsのサービスパック」→非活性化 <html> <head> </head> <body> <table> <tr> <td>OS</td> <td><select id="IDOS"> <option value="">-</option> <option value="Windows">Windows</option> <option value="Mac">Mac</option> <option value="Linux">Linux</option></select> </td> <td>Windowsのバージョン</td> <td><select id="IDVersion"> <option value="XP">XP</option> <option value="Vista">Vista</option> <option value="7">7</option></select> </td> <td>Windowsのサービスパック</td> <input type="text" value="" size="30"> </td> </tr> </table> </body> </html>
- 締切済み
- JavaScript
テーブル内のプルダウンの下に余白ができてしまう
以下のようなHTMLにて、プルダウンメニューの下になぜか余白ができてしまいます。この余白部分を消すにはどうしたらよいでしょうか？ padding-bottomを使うのかといろいろ試していますが、解決できません。どなたかご教授いただけますと幸いです。 <html> <body> <table border='1'> <tr> <td> コンテンツから探す </td> </tr> <tr> <td> <form> <select onChange="top.location.href=value"> <option value="#"></option> <option value="page1.html">ページ１</option> <option value="page2.html">ページ２</option> <option value="page3.html">ページ３</option> </select> </form> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
プルダウンで選択したCGIを動かしたい（ACTION=""をプルダウンで変更するには？）
プルダウンで選択したCGIを動かしたい（ACTION=""をプルダウンで変更するには？）以下の <option value="test1.cgi">テスト１　 <option value="test2.cgi">テスト２ <option value="test3.cgi">テスト３ <option value="test4.cgi">テスト４４つのプルダウンメニューを選択して、それぞれ別のCGIを動かすにはどうしたらできますか？よかったら教えて下さい。javascriptで出来そうな気がするのですが… <FORM name="testname" method="post" ACTION="/cgi-bin/??????" > <TABLE> <TR><TD>　テスト</TD> <TD bgcolor="#FFFFFF"> <SELECT name=""> <option value=""> <option value="test1.cgi">テスト１　 <option value="test2.cgi">テスト２ <option value="test3.cgi">テスト３ <option value="test4.cgi">テスト４ </SELECT></TD> </TR> <TR> <TD bgcolor="#cccccc" width="150">　開始日</TD> <TD bgcolor="#FFFFFF"> <input name="daysS" type="text" size="8"> </TD> </TR> <TR> <TD bgcolor="#cccccc" width="150">　終了日</TD> <TD bgcolor="#FFFFFF"> <input name="daysE" type="text" size="8"> </TD> </TR> </TABLE> <BR> <INPUT type="submit"name="send"value="開始"> <INPUT type="reset" name="reset" valiu="消去"> </FORM>
- ベストアンサー
- JavaScript
リストボックス全選択について
JavaScriptについて質問です。リストボックスA,B　と　プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。下記のソースのように作成したのですが、リストボックスが全選択されるところまでは良いのですが、プルダウン項目が最後の項目が選択された状態になってしまいます。リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。かなり困ってます。どなたか助けてください。。以下ソースです。 <html> <head> <script language="JavaScript">  </script> </head> <body> <table> <tr> <td> リストA<br> <select name="listboxA" multiple> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </td> <td> リストB<br> <select name="listboxB" multiple> <option value="サンプル4">サンプル4</option> <option value="サンプル5">サンプル5</option> <option value="サンプル6">サンプル6</option> </select> </td> <td> プルダウンC<br> <select name="Pdown"> <option value="サンプル7">サンプル7</option> <option value="サンプル8">サンプル8</option> <option value="サンプル9">サンプル9</option> </select> </td> </tr> </table> <br> <input type=submit value="送信" onClick="selectAll()"> </body> </html>
- 締切済み
- JavaScript
プルダウンによる表示制御方法
プルダウンの選択内容による表示の切り替えを行いたいです。例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></td></tr></table> すみませんが、よろしくお願い致します。
- ベストアンサー
- HTML
プルダウンメニューの利用
htmlのプルダウンメニューを使用した値計算のインタフェースを作成したいと思っています。プルダウンメニューに設定するメニュー項目に値を設定し、 onChangeを使用して、その値だけをPHPプログラムに渡すようにしたいのですが、 JavaScript部分をどのように書けばいいのか判りません。どなたかご教授お願いいたします。 <form name="formtest" action="test.php" method="post"> <table> <tr> <th>カテゴリ*</th> <td> <SELECT NAME="iPlanet" onchange=""> <OPTION VALUE="9" selected>初期値 <OPTION VALUE="0">サンプル1 <OPTION VALUE="1">サンプル2 </SELECT> </td></tr> </table> </form> onchangeでValueの値をPHPに送りたいのです。よろしくお願いします。
- ベストアンサー
- JavaScript
JavaScriptのSELECTの値について
JavaScriptについて、質問させてください。 html1からhtml2にSELECTで選択した値を渡すプログラムを作成しています。下はそのソースです。 <html> <head></head> <body> <form method="POST" action="html2" onSubmit="入力チェック"> <table> <tr> <td>項目A-1</td> <td>項目A-2</td> <td> <select name="selname1"> <option value="0">0</option> <option value="1,11,111">1</option> <option value="2,22,222">2</option> </select> </td> </tr> <tr> <td>項目B-1</td> <td>項目B-2</td> <td> <select name="selname2"> <option value="0">0</option> <option value="3,33,333">3</option> <option value="4,44,444">4</option> </select> </td> </tr> </table> </form> </body> </html> 項目は全部で１０ほどあるので、途中省略しています。 SELECTで0以外が選ばれていた場合に、それに関連する項目情報と optionのvalueをhtml2に送信させて、一覧表のように表示させたいと思います。 JavaScriptのDOMやループ文を使うようですが、私は専門外なので、どのような処理を組めばよいかわかりません。どなたか、わかる方ご教示願います。
- 締切済み
- JavaScript
cssで位置指定したテーブル下のプルダウンが見えてしまう問題
cssで位置指定したウィンドウの下にフォームのプルダウンがあると、プルダウンの部分に穴が開いたような状態になります。 firefox,operaでは起きずIE6で起きます。何か良い手はないでしょうか。よろしく、お願いします。 <html> <head> <style>  </style> </head> <body> <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> <form> <select> <option>aaaa</option> <option>bbbb</option> </select> </form> </body> </html>
- ベストアンサー
- HTML
テーブル内でドロップダウンメニューを使った際の行間
テーブルの中に配置したフォーム（ドロップダウンメニュー）の下に無用な空白ができてしまい，このままだとレイアウトが崩れて困っています．文末のHTMLソースをそのままIE6で表示いただくとご理解いただけると思います． <select size="1">としても改善しないため， <body>，<table>，<tr>，<td>，<form>などへ，CSS で， height で小さい数値を入れたり，line-height で行間詰めを試みても改善せず．これはもう仕方ないでしょうか？よろしくお願い致します。 <html> <head><title></title></head> <body> <table border="1"> <tr> <td> <form> <select onchange="location=this.options[this.selectedIndex].value"> <option>選択</option> <option value="1ndex.htm">1 <option value="2frame.htm">2 </select> </form> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
連動プルダウンのclonenode
質問お願いします。連動プルダウンをclonenodeで複製し、行を追加するjavascriptを組みたいのですが、複製されたプルダウンを変更すると、最初の行のプルダウンに連動してしまいます。 <html> <head> <title>連動プルダウン複製</title> <script type="text/javascript"> /*@cc_on@*/ function addEvent(e, t, f){ e./*@if(1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ t, f, false); } function addRow(trigger){ var table = trigger.ownerDocument.getElementById('Table1'); // 最初の行こぴー var row = table.rows[0].cloneNode(true); row.id = 'ROW.' + table.rows.length; // 最初のセレクト要素 select = row.getElementsByTagName('SELECT')[0]; select.name = 'column.' + table.rows.length; // 最初の tbody に行追加 table.tBodies[0].appendChild(row); } function cText(evt){ var obj = evt.target || evt.srcElement; // ... } </script> </head> <body> <div> <table id="Table1"> <tbody <tr> <td class="cellWhite"> <form> 設備停止項目： <select name="column" onchange="SetSubMenu(value);"> <option value="stop" selected>休止</option> <option value="check">点検・調整</option> <option value="clean">清掃</option> <option value="out">外部事情</option> <option value="machien">機械故障</option> <option value="ele">電気故障</option> <option value="stone">砥石交換</option> <option value="eat">食休</option> </select> </form> </td> <td> <form id="stop" class="secondpulldown"> 設備停止理由： <select> <option value="">余力</option> <option value="">SD</option> <option value="">自家整備</option> <option value="">日報収集</option> </select> </form> <form id="check" class="secondpulldown"> 設備停止理由： <select> <option value="">部品交換</option> <option value="">調整</option> <option value="">給油</option> <option value="">MT検査応援</option> </select> </form> <form id="clean" class="secondpulldown"> 設備停止理由： <select> <option value="">始業時</option> <option value="">終業時</option> <option value="">中間時</option> <option value="">スケールバック上げ</option> <option value="">集塵機バック上げ</option> </select> </form> <form id="out" class="secondpulldown"> 設備停止理由： <select> <option value="">給材時</option> <option value="">集材時</option> <option value="">停電</option> </select> </form> </td> <td> <form id="time" class="thirdpulldown"> 設備停止時間：<input type="text" width=65 size=8 style=text-align:right pattern="[0-9]*"/> </form> </td> </tr> </tbody> </table> <input type="button" value="行追加" onclick="addRow(this)"> </div> </body> </html> わかる方いらっしゃいましたら、ご回答よろしくお願いします。
- ベストアンサー
- JavaScript