更改HTML表單使用SelectionBox

我有這種形式：

<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>

我需要證明這種形式之一在我的html頁面中使用像這樣的選項框：

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

如果人shoose第一個選項，然後顯示形式1其他形式2

感謝您UR幫助

來源

2017-10-09 El mehdi El hamrouche

您可以在選擇選項上更改並顯示正確的格式 –

如何。你可以幫我一個代碼 –

我已經在下面發佈了完整的示例.. –

下面是如何可以辦理變更事件，使形式顯示或隱藏..

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>

來源

2017-10-09 18:03:03

<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>

默認設置display:none既國稅發形式

來源

2017-10-09 18:01:29

更改HTML表單使用SelectionBox

回答

相關問題