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

回答

相关问题