仅在HTML表单中选择某个下拉列表时才需要字段

我想知道只有在选择某个下拉列表时才需要某个字段 . 在我的表格中，该人将选择“加拿大”，并且将出现下面的两个字段（省和邮政编码），这在人员提交表格之前是必需的 . 如果此人选择“美国”，则会显示州和邮政编码 .

我遇到的麻烦是，如果我选择任何一个国家，即使它们被隐藏，仍然需要与该国家无关的字段 . 我需要它，以便如果我选择美国，那么省或邮政编码都是必需的，反过来也是如此 .

非常感谢任何帮助:)这是表格

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