プルダウンの選択値によりその他のプルダウンメニューやテキストエリアを活性・非活性化したいです。
下記の例では「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で質問しましょう!
似たような質問が見つかりました
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptで<select>の<option...
-
javascriptでセレクトボックス...
-
addclassがうまく働きません
-
<input>の選択肢をプルダウンメ...
-
VBScriptでHTMLのセレクトボッ...
-
JavascriptからSQLへ繋ぎ方が分...
-
selectを変更不可にしたい
-
【javascript】連想配列からセ...
-
プルダウン選択を変更すると、...
-
selectが変更されたらnameを指...
-
連想配列からセレクトボックス...
-
javascriptでの時間計算
-
今日の日付を自動的にセレクト...
-
同じ名前のセレクトがある場合...
-
プルダウンで選択した項目にあ...
-
プルダウンの値によって活性・...
-
selectの初期値を設定したい
-
まったく同じ<select>フォーム...
-
select option value が IE だ...
-
selectボックスで選択数を制限...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
連想配列を使ってコンボボック...
おすすめ情報