ドロップダウンボックスリストがあり、いくつかのフォームがあります.iドロップダウンボックスの値に対して特定のフォームを表示したいです。ドロップダウンボックスに次のような2つのリストが含まれているとします。（i）Man（ii）Animal。男性オプションが選択されると、男性と女性の2つのオプションを含むフォームに入ります。一方（動物の場合）は、3つのオプションライオン、トラ、牛を含むフォームに入ります。 このステートメントをhtmlとjavascriptsコードで書く方法???別のドロップダウンボックスからオプションを選択した後に特定のドロップダウンボックスを表示
使用このサンプル：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select id="formSelector">
<option value="0">select form type</option>
<option value="humanForm">human</option>
<option value="animalForm">animal</option>
</select>
<div id="humanForm" style="display:none;">
<input type="radio" name="humanSelector" />Man
<input type="radio" name="humanSelector" />Woman
</div>
<div id="animalForm" style="display:none;">
<input type="radio" name="animalSelector" />cat
<input type="radio" name="animalSelector" />dog
<input type="radio" name="animalSelector" />lion
</div>
<script>
var formSelector = document.getElementById("formSelector");
var humanForm = document.getElementById("humanForm");
var animalForm = document.getElementById("animalForm");
formSelector.addEventListener("change", function (event) {
humanForm.style.display = "none";
animalForm.style.display = "none";
switch (formSelector.value) {
case "humanForm":
humanForm.style.display = "block";
break;
case "animalForm":
animalForm.style.display = "block";
break;
}
});
</script>
</body>
</html>
私はこれを仮定は、二つの選択だったが、私はあなたが、私はJeffrey's answerをお勧めします、その場合には、フォームを、表示/非表示にしたい参照してください。
最初の選択と2番目の選択には何らかの関係がある必要があります。 1つの方法は、両方の選択を接続するdata-relationという属性を追加することです。 changeの場合、選択が更新されます。最初の表示や非表示のオプションだけを表示するなどの追加が必要になりますが、そのままにしておきます。
var cat = document.getElementsByTagName('select')[0];
var opt = document.getElementsByTagName('select')[1];
cat.addEventListener('change', function(s) {
for (var i = 0; i < opt.options.length; i++)
opt.options[i].hidden = opt.options[i].dataset.relation !== s.target.value;
});<select>
<option>man</option>
<option>animal</option>
</select>
<select>
<option data-relation=man>male</option>
<option data-relation=man>female</option>
<option data-relation=animal>lions</option>
<option data-relation=animal>tigers</option>
<option data-relation=animal>cow</option>
</select>これはjqueryのの数行でこれを行うことができ、非常に簡単です、あなただけの、その後、各フォームタイプを隠すための選択のonchangeイベントをバインドする必要がベースの右フォームを表示選択値の新しい値を返します。ここで
は、この作業の例です：
https://codepen.io/jcapinc/pen/YrJobM
$(function(){
var hidestuff = function(){
$(".man-form,.animal-form").hide();
}
$("select[name='formtype']").change(function(){
hidestuff();
var value = $(this).val();
if(value == "man"){
$(".man-form").show();
}
if(value == "animal"){
$(".animal-form").show();
}
});
hidestuff();
});
<div class="container">
<div class="col-md-offset-3 col-md-6">
<form>
<h1>Creature Form</h1>
<div class="form-group">
<label for="formtype">Choose Creature Type</label>
<select class="form-control" name="formtype">
<option value="">- Choose - </option>
<option value="man">Man</option>
<option value="animal">Animal</option>
</select>
</div>
<div class="man-form">
<div class="form-group">
<label for="manstuff">Man Stuff</label>
<input class="form-control" type="text"/>
</div>
</div>
<div class="animal-form">
<div class="form-group">
<label for="animalstuff">Animal Stuff</label>
<input class="form-control" type="text"/>
</div>
</div>
</form>
</div>
</div>
私達にあなたのコードを提供します。これまでに何を試しましたか？ – Krusader
これのためにjqueryコードを書くことができませんでした。 @Krusader。私はスクリプトの部分なしでhtmlの部分を提供できますか？ –