
プルダウンの選択値によりその他のプルダウンメニューやテキストエリアを活性・非活性化したいです。
下記の例では「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>の選択肢をプルダウンメ...
-
同じ名前のセレクトがある場合...
-
ラジオボタンの選択に応じてプ...
-
プルダウン選択を変更すると、...
-
Selectボックスの幅を自動で広...
-
javaScriptの変数をJavaの変数...
-
JavaScriptのfileオブジェクト...
-
<JavaScript>tableタグを入力不...
-
ASP.NETでNAME属性を固定にしたい
-
RegularExpressionValidatorの...
-
クリックされた罫表セルの行番...
-
onchangeイベントを強制的に発...
-
プルダウンで選択された値を別...
-
二次元配列に数字をランダムに...
-
sessionの値でボタンを活性・非...
-
JQueryで2つのテキストフィー...
-
cookie使用時にundefinedと表示...
-
doPostBack 関数について
-
【FORM】 リンク文字で submit...
-
tableの任意行にfocusをあてる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
javascriptでoptionタグを削除...
-
プルダウン選択を変更すると、...
-
2段階プルダウンで1段階目の選...
-
セレクトボックスで配列を呼び...
-
ラジオボタンとプルダウンを連...
-
【JavaScript】プルダウンで数...
-
スマホのフォームでのselect複...
-
二つのセレクトボックス間での...
-
3つの連動したプルダウンメニュ...
-
プルダウンを選択していないと...
-
2つのプルダウンメニューで、同...
-
selectを変更不可にしたい
-
Selectボックスの一覧表示方法
-
webページの一部のみの更新につ...
-
<select> をmultiple にしてい...
-
同じ名前のセレクトがある場合...
-
javascriptでセレクトボックス...
-
コードレビューをお願いします。
-
selectタグで日付を生成
おすすめ情報