javascript - 当我从下拉按钮中选择一个值时，其他值也会出现

Question

我想知道您是否可以帮我解决以下问题。我创建了一个下拉付款选项。当我选择“支票/储蓄帐户”时，表单会显示 2 个输入字段，以便用户可以输入其银行帐号和路由器号码。这就是我想要的这个选项。但是，当我选择信用卡选项时，会出现信用卡表格，但银行表格会显示在其顶部。有人可以告诉我我做错了什么吗？另外，当我来回切换选项时，表单根本没有改变，而是保持不变。

 document.getElementById('paymentOptions').onchange = function () {
        if (this.value == 'CreditCard') {
            document.getElementById('CreditCard').style.display = 'block'
        } else {
            document.getElementById('Banking').style.display = 'block';
        }
    }
 

<div class="col-75">
            <div class="container">
                <form>
                    <label>Payment method</label>
                      <select id="paymentOptions" name="paymentOptions">
                        <option value="CreditCard">Credit Card</option>
                        <option value="BankingAccount">Checking/Savings Account</option>
                      </select>
                        <div class="row" id="Banking" style="display: none">
                            <div class="col-50">
                                <label for="ccnum">Bank Account</label>
                                <input type="text" id="ccnum" name="cardnumber">
                            </div>
                            <div class="col-50">
                                <label for="ccnum">Routing Number</label>
                                <input type="text" id="ccnum" name="cardnumber">
                            </div>
                        </div>
                        <div class="row" id="CreditCard" style="display: none">
                            <div class="col-50">
                                <label for="fname"><i class="fa fa-user"></i> Company Name</label>
                                <input type="text" id="fname" name="firstname">
                                <label for="email"><i class="fa fa-envelope"></i> Email</label>
                                <input type="text" id="email" name="email">
                                <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
                                <input type="text" id="adr" name="address">
                                <label for="city"><i class="fa fa-institution"></i> City</label>
                                <input type="text" id="city" name="city">

                                <div class="row">
                                    <div class="col-50">
                                        <label for="state">State</label>
                                        <input type="text" id="state" name="state">
                                    </div>
                                    <div class="col-50">
                                        <label for="zip">Zip</label>
                                        <input type="text" id="zip" name="zip">
                                    </div>
                                </div>
                            </div>

                            <div class="col-50">
                                <label for="fname">Accepted Cards</label>
                                <div class="icon-container">
                                    <i class="fa fa-cc-visa" style="color:navy;"></i>
                                    <i class="fa fa-cc-amex" style="color:blue;"></i>
                                    <i class="fa fa-cc-mastercard" style="color:red;"></i>
                                    <i class="fa fa-cc-discover" style="color:orange;"></i>
                                </div>
                                <label for="cname">Name on Card</label>
                                <input type="text" id="cname" name="cardname">
                                <label for="ccnum">Credit card number</label>
                                <input type="text" id="ccnum" name="cardnumber">
                                <label for="expmonth">Exp Month</label>
                                <input type="text" id="expmonth" name="expmonth">
                                <div class="row">
                                    <div class="col-50">
                                        <label for="expyear">Exp Year</label>
                                        <input type="text" id="expyear" name="expyear">
                                    </div>
                                    <div class="col-50">
                                        <label for="cvv">CVV</label>
                                        <input type="text" id="cvv" name="cvv">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <p>
                            <input type="checkbox" id="autopayment" />
                            <label for="autopayment">Enroll in autopayment</label>
                        </p>
                        <input type="submit" value="Submit payment" class="btn">
                </form> 
            </div>
        </div>
    </div>

Answer 1

当选择另一个值时，您必须隐藏另一个值，换句话说，进行切换

document.getElementById('paymentOptions').onchange = function() {
  if (this.value == 'CreditCard') {
    document.getElementById('CreditCard').style.display = 'block'
    document.getElementById('Banking').style.display = 'none'
  } else {
    document.getElementById('Banking').style.display = 'block';
    document.getElementById('CreditCard').style.display = 'none'
  }
}