• 締切済み

プルダウンの値によって活性・非活性をするには

プルダウンの値によって他のプルダウンやテキストエリアを 非活性にするにはどのようにすればよいでしょうか まったく思いつきません。 やりたいことは以下の通りです。 「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>

みんなの回答

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

disabledをオン・オフすれば良いってことでしょうか？ ご提示のサンプルだと、テキスト入力の位置をどこにしたいのか不明ですが… （とりあえず、全体をformに入れちゃいました） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> label { margin-right:1.5em; } </style> <script type="text/javascript"><!-- function check(sel) { var v = sel.value, frm = sel.form; flg = (v=='Windows' || v=='')?false:true; frm.elements['IDVersion'].disabled = flg; frm.elements['Pack'].disabled = flg; } --></script> </head> <body> <form> <label>OS: <select id="IDOS" onchange="check(this)"> <option value="">-</option> <option value="Windows">Windows</option> <option value="Mac">Mac</option> <option value="Linux">Linux</option> </select> </label> <label> Windowsのバージョン: <select id="IDVersion"> <option value="XP">XP</option> <option value="Vista">Vista</option> <option value="7">7</option> </select> </label> <label> Windowsのサービスパック: <input type="text" name="Pack" value="" size="30"> </label> </form> </body> </html>

gdcootie
質問者

お礼

ありがとうございます。 やりたいことはこんな感じです。 ついでに非活性になったら背景色を グレーアウトするにはどうしたらよいのでしょうか

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

    プルダウンの選択値によりその他のプルダウンメニューやテキストエリアを活性・非活性化したいです。 下記の例では「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> <!-- end footer -->

  • プルダウンメニューの利用

    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に送りたいのです。 よろしくお願いします。

  • テーブル内のプルダウンの下に余白ができてしまう

    以下のような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
  • フォーム内の値のチェックについて

    このようなフォーム(aspでセレクトボックスの数は可変になります。)にてSubmit時に 同じ値が選ばれていたらalertを出すJavaScriptを作りたいのですが、 どのようなものを作ればよろしいでしょうか？ <FORM name="TestForm" action="" method="POST" target=""> <TABLE border="1" cellspacing="0" cellpadding="0" width="100%"> <TR> <td>1位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>2位</td> <TD > <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>3位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> </TR> </TABLE> <TR><TD> <INPUT type="submit" value=登録 name=B1 onClick=""> </TD></TR> </FORM>

  • プルダウンによる表示制御方法

    プルダウンの選択内容による表示の切り替えを行いたいです。 例えば、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
  • 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やループ文を使うようですが、 私は専門外なので、どのような処理を組めばよいかわかりません。 どなたか、わかる方ご教示願います。

  • プルダウンで選択した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>

  • php　メールフォーム　プルダウンメニュー

    プルダウンメニューを使用して、フォーム→確認→送信と順々に値を受け取りたいのですが、form.phpではプルダウンメニューは表示されますが、form.phpで選択したプルダウンメニューがconfirm.phpでは表示されません。 confirm.phpでも表示されてなおかつ送信をしたら受け取れるようにしたいのです。 初心者なので、いろいろと勉強をしながら、本を読んだり、調べたのですが、まったくわからずです。どなたかご教授お願いします。 form.php <form method="post" action="confirm.php"> <table cellpadding="0" cellspacing="0" border="0"><tr><td>項目</td><td>入力欄</td><td>記入例</td></tr> <tr><td><label for="name">名前</label></td><td><input type="text" size="50" name="name" id="name" value="<?php print h(@$_SESSION['name']); ?>" /></td><td>例：goo 太郎</td></tr> <tr><td><label for="mail">生年月日</label></td><td> <select name="year[]"><option value="1970">1970</option><option value="1971">1971</option><option value="1972">1972</option><option value="1973">1973</option><option value="1974">1974</option></select>年 <select name="month[]"><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option></select>月 <select name="day[]"><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option></select>日 </td><td>例：1990年01月01日</td></tr> <tr><td colspan="3" style="text-align:center;"><input type="hidden" name="aaa" value="<?php print h($aaa); ?>" /><input type="submit" value="確認" /></td></tr> </table></form> confirm.php session_start(); $_POST = checkInput($_POST); if (isset($_POST['aaa']) && isset($_SESSION['aaa'])) { $aaa = $_POST['aaa']; if (!in_array($aaa, $_SESSION['aaa'])) { die('不正アクセスの疑いがあります。'); } } else { die('不正アクセスの疑いがあります。'); } $name = isset($_POST['name']) ? $_POST['name'] : NULL; $kana = isset($_POST['kana']) ? $_POST['kana'] : NULL; $mail = isset($_POST['mail']) ? $_POST['mail'] : NULL; $comment = isset($_POST['comment']) ? $_POST['comment'] : NULL; $error = array(); ★★★各項目のチェック★★★ $_SESSION['name'] = $name; $_SESSION['kana'] = $kana; $_SESSION['mail'] = $mail; $_SESSION['comment'] = $comment; $_SESSION['error'] = $error; <table class="form" cellpadding="0" cellspacing="0" border="0"> <tr><td>項目</td><td>入力欄</td><td class="title_color" style="border-left:1px solid #ffffff;">記入例</td></tr> <tr><td>名前</td><td class="title_back2"><?php print h($name);?></td><td>例：goo　太郎</td></tr> <tr><td>生年月日</td><td>★★★★★ここにform.phpからのプルダウンメニューを受け取りたい★★★★★</td><td>例：1990年01月01日</td></tr> </table> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td><form action="form.php" method="post"><input type="submit" value="戻る" /></form></td> <td><form action="send.php" method="post"><input type="hidden" name="aaa" value="<?php print h($aaa);?>" /><input type="submit" value="送信" /></form></td> </tr></table>

    • ベストアンサー
    • PHP
  • ２段プルダウンの値の保持について（html）

    ２段プルダウンの値の保持について（html） お世話になっております。 WEBページにてエントリーフォームを作成しております。 base.html（エントリー画面） base_ck.php（確認画面） Aプルダウン（都道府県） Bプルダウン（所属名） MySQLよりPHPで先にBプルダウンの値を計算しておきます。 Aプルダウンを選択したのち、Aのvalue値をキーとしてBプルダウンの値を計算（javascript）しております。 ここまでは問題ないのですが、確認画面から戻る（submit）と、Bプルダウンの値が消えて選択もできなくなります。 今までは運用でごまかしておりましたが（Aプルダウンで一旦違う値を選択し再度選びなおすとBプルダウンが復活する）、 クライアントより修正依頼がきてしまいました。 PHP・HTMLは何とか書けるのですが、JavaScriptはど素人で、このプログラムもネットから情報を拾い集めて何とかできました。 ご教授いただければ幸いです。 サンプルコードは以下となります。 「base.html（エントリー画面）」 <html lang="ja"> <head> <title>テストページ</title> <script type="text/javascript"> <!-- データベースよりJavaScriptにて「所属名」を配列に格納する belong_value = new Array(); belong_text = new Array(); belong_length = new Array(); <?php 　　//ここでBプルダウンの値を計算して配列に格納する。 　 //データサンプル //belong_value[11] = new Array("0","1001","1002"); 　　//belong_length[11] = 3; //belong_text[11] = new Array("---","北海道","北海道倶楽部","札幌クラブ"); ?> function BelongList(idx){ //選択リストに項目を追加 for(i=0;i<belong_length[idx];i++){ document.form_kojin.belong.length=belong_length[idx]; document.form_kojin.belong.options[i].text = belong_text[idx][i]; document.form_kojin.belong.options[i].value= belong_value[idx][i]; } //選択リストがブランクの場合 if(i==0){ document.form_kojin.belong.length=1; document.form_kojin.belong.options[i].text = "---"; document.form_kojin.belong.options[i].value= 0; } } //--> </script> </head> <body> <div id="wrapper"> <div id="main"> <h1>申込ページ</h1><br /> <?php $action_ck = "https://aaa/base_ck.php"; ?> <h2></h2> <div class="main-frame"> <p><span class="style-indispensable">※必須項目</span></p><br /> <form name="form_kojin" action="<?php echo htmlspecialchars($action_ck, ENT_QUOTES); ?>" method="post"> <table> <tr> <th class="th-style"> <div><span class="style-indispensable">※</span>都道府県</div> </th> <td class="td-style"> <SELECT autofocus size="1" name="branch_name" id="branch_name" onChange="BelongList(this.options[selectedIndex].value);"> <OPTION value="0">---</OPTION> <OPTION value="11">北海道</OPTION> <OPTION value="21">青森県</OPTION> <OPTION value="22">岩手県</OPTION> </SELECT> </td> </tr> <tr> <th class="th-style"> <div><span class="style-indispensable">※</span>所属名</div> </th> <td class="td-style"> <SELECT size="1" name="belong" id="belong"><!-- BelongList関数より自動生成 --> <OPTION value="0">---</OPTION> </SELECT> </td> </tr> </table> <br /><br /> <div> <input name="submit" type="submit" value="　入力確認画面へ　" class="button-05"> </div> </form> </div> </div> </div> </body> </html>

  • 選択ボックスで選んだものに応じて値を変更する方法

    片方の選択ボックスで選んだものに応じて もう片方の選択ボックスの表示内容を変更したいと思います。 「なす」を選んだら３０円 「きゅうり」を選んだら４０円 「ねぎ」を選んだら５０円 「選んで下さい。」を選んだら０円（初期値） としたいと思うのですが、下記内容をどのように 変更すればよろしいのでしょうか。 教えて下さい。 <table border="0" width="700"> <tr> <td width="50%"> <select name="野菜"> <option value="SENTAKU">選んで下さい。</option> <option value="NASU">なす</option> <option value="KYUURI">きゅうり</option> <option value="NEGI">ねぎ</option> </select> </td> <td> <select name="値段"> <option value="NEDAN">０円</option> </select> </td> </tr> </table>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する