Question

我想隐藏一个表单，并根据国家/地区下拉列表显示一个联系我们按钮。因此，如果用户选择US，则显示整个表单。如果用户选择CA，表单将消失并显示联系我们消息。

 $( document ).ready(function() {
       $("#bill_contry").change(function () {
             var country = this.value;
             if(country == "US"){
               $("#bank_name").html("Bank Name");
                $("#routing_number").html("Routing Number (9 digits)");

            $("#qty1").html("1 - $349 USD each");
            $("#qty2").html("2 - $339 USD each");
            $("#qty3").html("3 - $329 USD each");

            $( "#help_image1" ).attr("href", "images/CheckAcctRoutingNumHelp.jpg");

            $( "#help_image2" ).attr("href", "images/CheckAcctRoutingNumHelp.jpg");

            $( "#help_image3" ).attr("href", "images/CheckAcctRoutingNumHelp.jpg");

        } else if(country == "CA"){
            $("#bank_name").html("Bank Number ( 3 digits )");
            $("#routing_number").html("Transit# ( 5-6 digits )");    

            $("#qty1").html("1 - $374 CAD each");
            $("#qty2").html("2 - $364 CAD each");
            $("#qty3").html("3 - $354 CAD each");

            $( "#help_image1" ).attr("href", "images/cad_cheque.jpg");

            $( "#help_image2" ).attr("href", "images/cad_cheque.jpg");

            $( "#help_image3" ).attr("href", "images/cad_cheque.jpg");

        }

    });

表格

<form action="process_order.php" method="post" name="form1">

＃1选择你的国家

<select name="bill_country" id="bill_contry">
    <option value="US">USA</option>
    <option value="CA">CA</option>
</select>       

 <h2><span>#2</span> Select your number of </h2>
     <select name="qty">
     <option id="qty1" value="1">1 - $349 USD each</option>
     <option id="qty2" value="2">2 - $339 USD each</option>
     <option id="qty3" value="3">3 - $329 USD each</option>

Answer 1

您可以做的是在您的页面上为USA和CA添加两个表单，然后只需隐藏并显示从选择选项中选择值的时间。

这是我的jsFiddle示例

jsFiddle：https://jsfiddle.net/1q633sp3/

HTML

<select class="country">
    <option>USA</option>
    <option>CA</option>
</select>
<form id="default-form">
    <p>Form properties go here</p>
    <select name="qty">
        <option id="qty1" value="1">1 - $349 USD each</option>
        <option id="qty2" value="2">2 - $339 USD each</option>
        <option id="qty3" value="3">3 - $329 USD each</option>
    </select>
    <button type="button">Submit</button>
</form>
<form id="contact-us">
    <p>Please get in contact with us</p>
    <textarea name="message"></textarea>
    <button type="button">Submit</button>
</form>

的jQuery

$(function () {
    $('#contact-us').hide();

    $('.country').on('change', function () {
        if ($(this).val() == "CA") {
            $('#default-form').slideUp();
            $('#contact-us').slideDown();
        } else if ($(this).val() == "USA") {
            $('#default-form').slideDown();
            $('#contact-us').slideUp();
        }
    });
});

我想根据国家/地区下拉隐藏表单，显示和图像

＃1选择你的国家

1 个答案: