javascript - 仅当在 HTML 表单中选择特定下拉列表时才需要该字段

Question

我想知道仅当选择某个下拉列表时才需要某个字段。在我的表单中，该人将选择“加拿大”，下面将出现两个字段(省和邮政编码)，这是人们提交表单之前必需的。如果用户选择“美国”，则会显示州和邮政编码。

我遇到的问题是，如果我选择任一国家/地区，与该国家/地区无关的字段仍然是必需的，即使它们是隐藏的。我需要它，这样如果我选择美国，则需要省份或邮政编码，反之亦然。

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

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

Answer 1

您可以使用 .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() 实例下，因为它们都对同一件事使用react。