只有在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（）方法，因此对于您的每一个.更改，您都有如下内容

$('select[name=country]').change(function () {
        if ($(this).val() == 'Canada') {
            $('#provinceselect').show();
            $('#provinceselect').prop('required',true);
        } else {
            $('#provinceselect').prop('required',false);
            $('#provinceselect').hide();
        }
    });

我很好奇为什么您有四个不同的.change（）实例，我会把它们都放在change（）的同一个实例下，因为它们都对同一件事做出反应。