好吧所以现在我有一个工作下拉依赖形式，例如，如果我在下拉列表中选择项目1，则会出现一些div，如果我选择项目2，则会出现其他div ...我的问题是即使其他div也是隐藏的，它仍然会得到div中隐藏输入类型的post值。有没有一种方法可以隐藏div，它的帖子输入不会被提交？
这是我的jquery
$(function() {
$(".forms").hide();
$("#myselect").change(function() {
switch($(this).val()){
case "student":
$(".forms").hide().parent().find("#Form1").show();
break;
case "teacher":
$(".forms").hide().parent().find("#Form2").show();
break;
}
});
});
这是我的观点
<form>
<select id="myselect">
<option value="student">student</option>
<option value="teacher">teacher</option>
</select>
<div id="Form1" class="forms">
//some input here like <input type="text" name="studentName"/>
</div>
<div id="Form2" class="forms">Form 2 Contents</div>
//some input here like <input type="text" name="teacherName"/>
</form>
修改 我用.remove（）试过这个。但它仍然从#student_profile
中读取帖子数据$(function() {
$(".fields").hide();
$("#role").change(function() {
switch($(this).val()){
case "3":
$(".fields").hide().parent().find("#student_profile").show();
break;
case "2":
$(".fields").hide().parent().find("#teacher_profile").show();
$("#student_profile").remove();
break;
}
});
});
编辑继承我的真实代码
<form action="add" method="post" class="form label-inline uniform" />
<h3><a href="#">User</a></h3>
<div class="field"><label for="username">Username </label> <input id="username" name="username" size="50" type="text" class="medium" /></div>
<div class="field"><label for="password">Password </label> <input id="password" name="password" size="50" type="password" class="medium" /></div>
<div class="field">
<label for="role">Role </label>
<select id="role" name="role" class="medium">
<optgroup label="Type of User">
<option value="3" />Student
<option value="2" />Teacher
<option value="1"/>Admin
</optgroup>
</select>
</div>
<div id="student_profile" class="fields">
<div class="field">
<label for="type">Course</label>
<select id="type" name="stdntCourse" class="medium">
<optgroup label="Choose Course">
<option value="BS IT" />BS IT
<option value="BS CS" />BS CS
<option value="BS IS" />BS IS
</optgroup>
</select>
</div>
<div class="field">
<label for="type">Year</label>
<select id="type" name="stdntYear" class="medium">
<optgroup label="Student Year">
<option value="1st" />1st
<option value="2nd" />2nd
<option value="3rd" />3rd
<option value="4th" />4th
</optgroup>
</select>
</div>
</div>
<div class="field"><label for="regdate">Registration Date </label> <input id="regdate" name="regdate" size="20" type="text" class="large" /></div>
<br />
<h3><a href="#">User Profile</a></h3>
<div class="field"><label for="fname">First Name </label> <input id="fname" name="fname" size="50" type="text" class="large" /></div>
<div class="field"><label for="fname">Middle Name </label> <input id="mname" name="mname" size="50" type="text" class="large" /></div>
<div class="field"><label for="lname">Last Name </label> <input id="lname" name="lname" size="50" type="text" class="large" /></div>
<div class="field"><label for="nickname">Nickname</label> <input id="nickname" name="nickname" size="50" type="text" class="large" /></div>
<div class="field"><label for="birthday">Birthday</label> <input type="text" size="20" name="birthday" id="birthday" class="large"/></div>
<div class="field">
<label for="type">Sex</label>
<select id="type" name="sex" class="medium">
<optgroup>
<option value="M" />Male
<option value="F" />Female
</optgroup>
</select>
</div>
<div class="field"><label for="address">Address</label> <input id="address" name="address" size="50" type="text" class="large" /></div>
<div class="field"><label for="city" class="">City </label> <input id="city" name="city" size="20" type="text" class="medium" /></div>
<div class="field"><label for="country" class="">Country </label> <input id="country" name="country" size="20" type="text" class="medium" /></div>
<div class="field"><label for="zcode">Zip Code </label> <input id="zcode" name="zcode" size="20" type="text" class="medium" /></div>
<!--
<div class="field clearfix">
<label for="lname">File Upload </label>
<input style="opacity: 0;" class="file" type="file" />
</div>
---->
<!----
<div class="controlset field">
<span class="label">Preferred Location</span>
<div class="controlset-pad">
<input name="radio1" id="radio1" value="1" type="radio" /> <label for="radio1">Option 1</label><br />
<div class="clear"></div>
<input name="radio1" id="radio2" value="1" type="radio" /> <label for="radio2">Option 2</label><br />
<div class="clear"></div>
<input name="radio1" id="radio3" value="1" type="radio" /> <label for="radio3">Option 3</label><br />
</div>
</div>
<div class="controlset field">
<span class="label">Something Else </span>
<div class="controlset-pad">
<input name="approved" id="check1" value="1" type="checkbox" /> <label for="check1">Some Option 1</label><br />
<div class="clear"></div>
<input name="pending" id="check2" value="1" type="checkbox" /> <label for="check2">Some Option 2</label><br />
<div class="clear"></div>
<input name="actives" id="check3" value="1" type="checkbox" /> <label for="check3">Some Option 3</label><br />
</div>
</div>
<div class="field"><label for="description">Description</label> <textarea rows="7" cols="50" id="description" name="description"></textarea></div>
<br />
---->
<div class="buttonrow">
<input type="button" class="btn" value="Back" onClick="history.go(-1);return true;">
<input type="reset" class="btn btn-black" value="Reset"/>
<input type="submit" id="submit" class="btn btn-grey" value="Add User"/>
</div>
</form>
答案 0 :(得分：1)
解决方法：http://jsfiddle.net/Bksk7/2/
基本上，在进行此类技术时您需要了解的是，除非您将字段放在不同的表单上，否则当您按下提交input的{{1}}时，它将始终提交字段它。
要解决此问题，您需要使用JavaScript来接管type所具有的功能。这样做很简单，因为使用submit设置click侦听器，顾名思义，这将阻止该按钮的默认功能。
之后你需要弄清楚要发送哪些元素并将数据传递给.preventDefault()，然后你就完成了：）
如果您愿意，您甚至可以利用这种方法进行一些很好的验证。
希望有所帮助
解决方法：http://jsfiddle.net/Bksk7/2/
相关文档：
答案 1 :(得分：0)
您是否尝试过使用jQuery删除不需要的输入？ （http://api.jquery.com/remove/）
答案 2 :(得分：0)
这里的一些输入如下：
<input type="text" name="teacherName"/>`
这部分代码在你的div之外：
<div id="Form2" class="forms">Form 2 Contents</div>
这就是你无法隐藏它的原因
并尝试定位每个.forms
$(function() {
$(".forms").hide();
$("#myselect").change(function() {
console.log($(this).val());
switch($(this).val()){
case "student":
$(".forms").each(function(){
$(this).hide();
});
$("#Form1").show();
break;
case "teacher":
$(".forms").each(function(){
$(this).hide();
});
$("#Form2").show();
break;
}
});
});