変更のHTMLこんにちは選択ボックス

Question

を使用して、フォームとは、私はこのフォームを持っている

あなたの助けをありがとうございました私のhtmlページでこのようなオプションボックスを使用して：

<select> 
    <option value="Student">Student</option> 
    <option value="Prof">Prof</option> 
</select> 

人は最初のオプションをshooseならば、どのように2

は、デフォルトではウル助け

Answer 1

oftheの両方にdisplay:noneを設定する1他のフォームがあるショーは変更イベントを処理し、フォームが表示または非表示にすることができ..

document.addEventListener('DOMContentLoaded',function() { 
 
    document.querySelector('select').onchange=changeEventHandler; 
 
},false); 
 

 
function changeEventHandler(event) { 
 
if(event.target.value!="Prof"){ 
 
    document.getElementsByName("form2")[0].style.display="none"; 
 
    document.getElementsByName("form1")[0].style.display="block"; 
 
    } 
 
    else { document.getElementsByName("form2")[0].style.display="block"; 
 
    document.getElementsByName("form1")[0].style.display="none"; } 
 
    }

<form name="form1" action="/action_page.php"> 
 
    <fieldset> 
 
    <legend>Student information:</legend> 
 
    First name:<br> 
 
    <input type="text" name="firstname" value="Mickey"><br> 
 
    Last name:<br> 
 
    <input type="text" name="lastname" value="Mouse"><br> 
 
    Student Number:<br> 
 
    <input type="text" name="lastname" value="Mouse"><br> 
 
    <input type="submit" value="Submit"> 
 
    </fieldset> 
 
</form> 
 
<form name="form2" action="/action_page.php"> 
 
    <fieldset> 
 
    <legend>Prof information:</legend> 
 
    First name:<br> 
 
    <input type="text" name="firstname" value="Mickey"><br> 
 
    Last name:<br> 
 
    <input type="text" name="lastname" value="Mouse"><br> 
 
    Prof Number:<br> 
 
    <input type="text" name="lastname" value="Mouse"><br> 
 
    Prof classe:<br> 
 
    <input type="text" name="lastname" value="Mouse"><br> 
 
    <input type="submit" value="Submit"> 
 
    </fieldset> 
 
</form> 
 
<select> 
 
    <option value="Student">Student</option> 
 
    <option value="Prof">Prof</option> 
 
</select>

Answer 2

<select id="selectForm"> 
    <option value="Student">Student</option> 
    <option value="Prof">Prof</option> 
</select> 

<script> 
$(document).on("change", "#selectForm", function() { 
    if($(this).val() == "Student") { 
     $("#form1").show(); 
     $("#form2").hide(); 
    } 
    if($(this).val() == "Prof") { 
     $("#form2").show(); 
     $("#form1").show(); 
    } 
}) 
</script> 

をありがとうございましたフォームはこちらのフォーム