我想知道只有在选择某个下拉列表时才需要某个字段。在我的表格中,该人会选择加拿大"下面会出现两个字段(省和邮政编码),这是人们提交表格之前所必需的。如果该人选择了#34;美国",则会显示州和邮政编码。
我遇到的麻烦是,如果我选择任何一个国家/地区,即使它们被隐藏,仍然需要与该国家/地区无关的字段。我需要它,这样如果我选择美国,则需要省或邮政编码,反之亦然。
非常感谢任何帮助:)这是表格
<script type='text/javascript'>//<![CDATA[
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#province').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
$('#province').prop('required',false);
}
});
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#postalselect').show();
$('#postal').prop('required',true);
} else {
$('#postalselect').prop('required',false);
$('#postalselect').hide();
$('#postal').prop('required',false);
}
});
</script>
<!--HTML Form-->
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname">
<input placeholder="First Name" type="text" name="first_name" required>
<input placeholder="Last Name" type="text" name="last_name" required>
<input placeholder="Email" type="email" name="email" id="email" required>
<!--Country select-->
<select class="countrycss" id="country" name="country" required>
<option value="" selected="selected">Please Select Country</option>
<option value="Canada" id="Canada">Canada</option>
<option value="United States" id="United States">United States</option>
</select>
<!--Province select-->
<div id="provinceselect" style="display:none;">
<select class="provincecss" id="province" name="province" required>
<option value="" selected="selected">Please Select Province</option>
<option value="Alberta" id="Alberta">Alberta</option>
<option value="British Coloumbia" id="British Coloumbia">British Coloumbia</option>
</select>
</div>
<!--State select-->
<div id="stateselect" style="display:none;">
<select class="statecss" id="state" name="state">
<option value="" selected="selected">Please Select State</option>
<option value="Arkansas" id="Arkansas">Alaska</option>
<option value="Hawalli" id="Hawalli">Hawalli</option>
</select>
</div>
<!--Postal select-->
<div id="postalselect" style="display:none;">
<input placeholder="Postal Code" type="text" name="postal" required>
</div>
<!--Zip select-->
<div id="zipselect" style="display:none;">
<input placeholder="ZipCode" type="text" name="zip" required>
</div>
<input placeholder="City" type="text" name="city" required>
<input placeholder="Address" type="text" name="address1" required>
<input name="shipping" class="shipping" type="radio" id="shipping" checked/>
<label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
<br>
<input name="shipping" class="shipping" type="radio" id="noshipping" />
<label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>
<br>
<button name="submit" type="submit" id="submit">Pay Now</button>
答案 0 :(得分:2)
您可以使用.prop()方法,因此对于每个.change,您将拥有类似
的内容$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#provinceselect').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
}
});
我很好奇为什么你有四个不同的.change()实例,我会把它们放在同一个change()实例下,因为它们都是对同一个事情做出反应。
答案 1 :(得分:0)
是的,从可选字段中删除必填字段,然后使用prop()方法添加它们。