
プルダウンの選択値によりその他のプルダウンメニューやテキストエリアを活性・非活性化したいです。
下記の例では「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 -->
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>
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が見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
C#(csファイル)とjavascriptと...
-
Javascriptでフォームのセレク...
-
セレクトボタンで特定の項目で...
-
ボタン無しでフォーム内容送信
-
javaScriptの変数をJavaの変数...
-
onchangeイベントを強制的に発...
-
return trueとreturn falseの用...
-
Formのシリアライズができない
-
RegularExpressionValidatorの...
-
Javascriptに条件分布ついて(再)
-
name = cats[1] という input ...
-
switchを使って四則演算のプロ...
-
複数のformから値を取得する方法
-
データベースの値を判断してラ...
-
テキストボックスにカーソルを...
-
テーブル内のチェックボックス...
-
複数のチェックボックス項目が...
-
idの振り直しについて
-
画面表示とともに、テーブルの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
javascriptでoptionタグを削除...
-
プルダウン選択を変更すると、...
-
2段階プルダウンで1段階目の選...
-
セレクトボックスで配列を呼び...
-
ラジオボタンとプルダウンを連...
-
【JavaScript】プルダウンで数...
-
スマホのフォームでのselect複...
-
二つのセレクトボックス間での...
-
3つの連動したプルダウンメニュ...
-
プルダウンを選択していないと...
-
2つのプルダウンメニューで、同...
-
selectを変更不可にしたい
-
Selectボックスの一覧表示方法
-
webページの一部のみの更新につ...
-
<select> をmultiple にしてい...
-
同じ名前のセレクトがある場合...
-
javascriptでセレクトボックス...
-
コードレビューをお願いします。
-
selectタグで日付を生成
おすすめ情報