当我 select 下拉按钮中的一个值时，其他值也会出现

Question

我想知道你是否可以帮助我解决以下问题。我创建了一个下拉支付选项。当我 select "checking/savings account" 时，表单显示 2 个输入字段，以便用户可以输入他们的银行帐号和路由器号码。这就是我想要的这个选项。但是，当我 select 信用卡选项时，信用卡表格出现了，但银行表格却出现在它上面。有人可以告诉我我做错了什么吗？此外，当我来回切换选项时，表格根本没有改变，而是保持不变。

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

Answer 2

您遇到问题的原因是您将 CreditCard div 和 Banking div 的显示更改为阻止，但您没有更改它们如果未被选中，则返回 display: none。您还应该添加一个 onload 侦听器来检查 paymentOptions 下拉列表的初始值是什么，然后更改您的 2 divs.

的显示值

window.onload = () => {
        const paymentOptionsSelect = document.getElementById("paymentOptions");

        const selectedOption = paymentOptionsSelect.options[paymentOptionsSelect.selectedIndex].value;
        if (selectedOption == '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'
        }
    };

仔细查看更改侦听器中添加的 2 行：

document.getElementById('paymentOptions').onchange = function () {
        if (this.value == 'CreditCard') {
            document.getElementById('CreditCard').style.display = 'block'
            document.getElementById('Banking').style.display = 'none'; // set back to display none when CreditCard is not selected.
        } else {
            document.getElementById('Banking').style.display = 'block';
            document.getElementById('CreditCard').style.display = 'none' // set back to display none when Banking is not selected.
        }
    }

祝你好运！

Answer 3

试试Jquery 3.3.1的方法，希望对你有帮助

$(document).ready(function(){ 
 $("#paymentOptions").on('change', function(){
   if ($(this).val() == 'CreditCard') {
            $('#CreditCard').css('display','block');
   $('#CreditCard').css('display','none');
        } else {
            $('#CreditCard').css('display','none');
   $('#CreditCard').css('display','block');
        }
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

当我 select 下拉按钮中的一个值时，其他值也会出现

When I select one value from the dropdown button, the other values appear as well

html

javascript

getelementbyid