[英]hide and show input text based on drop down selection however
隐藏和显示基于下拉选择的输入文本,但是当我提交表单并且没有完成表单验证时,“输入文本”不再显示。
我正在使用jquery,并且我可以显示和隐藏,效果很好,但是这部分在困扰我很多。
我的客户不会填写所有表单字段,因此当他们提交表单时,我希望他们根据他们的下拉选择RATHER查看输入文本,但缺少输入文本。
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').show();
}
else
$("#mydiv").hide();
});
});
<select name="shipping" id="shipping">
<option value="LA">LA</option>
<option value="NYC">NYC</option>
</select>
<tr id="mydiv" style="display:none">
<td><input type="text" name="testing"></td>
</tr>
<tr>
<td><input type="text" name="testing2"></td>
</tr>
<tr>
<td><input type="text" name="testing3"></td>
</tr>
<input type="submit" value="Submit" />
在这里看jsFiddle 。 有用。 我在您的html中看不到<table>
标记,这是一个问题。
<select name="shipping" id="shipping">
<option value="select">Select</option>
<option value="LA">LA</option>
<option value="NYC">NYC</option>
</select>
<table>
<tr id="mydiv" style="display:none">
<td>
<input type="text" name="testing" value="show/hide"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="testing2"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="testing3"/>
</td>
</tr>
</table>
<input type="submit" value="Submit" />
Javascript:
$('#shipping').change(function () {
if ($("#shipping").val() == "LA") {
$('#mydiv').show();
} else $("#mydiv").hide();
});
您要验证的内容。
if textbox is hidden , it should be part of validation or not
if that is part of validation use
$('#id').prop("required", "true");
else
$('#id').removeAttr("required");
与其尝试使用内联样式,不如尝试使用最初将其隐藏的类,
<tr id="mydiv" class="hidden">
<td><input type="text" name="testing"></td>
</tr>
CSS: .hidden{display:none;}
然后做
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').show();
}
else
$("#mydiv").hide();
});
});
(OR)当您想显示#mydiv时,尝试删除“隐藏”类
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').removeClass('hidden');
}
else
$("#mydiv").addClass('hidden');
});
});
会工作的!!
如果您希望在页面重新加载时显示div信息,则需要在页面加载时检查选定的信息。 不要使默认不显示任何内容。 加载页面时将其隐藏。
$(document).ready(function() {
$("#mydiv").hide();
var shipLocation = $("select#shipping").val();
if ( shipLocation == "LA")
{
$('#mydiv').show();
}
然后添加您的送货方式更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.