我想隐藏一个窗体和显示和基于国家下拉列表的图像

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();
        }
    });
});