javascript - 从下拉菜单中选择选项不会显示应有的内容

Question

也许有人可以告诉我如何解决从 Paypal/比特币/信用卡中进行选择的问题，因为我几乎尝试了所有方法，但没有任何效果像它应该的那样

我也尝试让它们成为 child()/children()/next() 等，但没有任何帮助

  <select id="payment" name="user-payment">
          <option value="select method">Select Payment Method</option>
          <option value="Credit Card">Credit Card</option>
          <option value="PayPal">PayPal</option>
          <option value="Bitcoin">Bitcoin</option>
        </select>

$paymentOptionsCard.change(()=>{

  // if credit card
  if($paymentOptions.val()==='Credit Card'){
    $creditCard.show();
    bullPay = true;
    }
  else{
    $creditCard.hide();
    bullPay = false;
      }
    });



$paymentOptionsPaypal.change(()=>{
   if($paymentOptionsPaypal.val()==="PayPal"){
    $paypal.show();
    bullPay = true;
  }
  else{
    $paypal.hide();
    bullPay = false;
  }});


$paymentOptionsBitcoin.change(()=>{
    //if bitcoin
    if($paymentOptionsBitcoin.val()==="Bitcoin"){
     $bitcoin.show();
     bullPay = true;
   }
   else{
     $bitcoin.hide();
     bullPay = false;
   }
 });

这就是变量/

//getting payment options
const $paymentOptions = $("#payment");
//selecting default as Credit card

const $paymentOptionsBitcoin = $paymentOptions.val("Bitcoin");
const $paymentOptionsPaypal = $paymentOptions.val("PayPal");
const $paymentOptionsCard = $paymentOptions.val("Credit Card");

我希望代码能够“显示”或“隐藏”值，以及 true 或 false 属性是否会将其分配给变量。现在它只显示，而不分配所有它们

Answer 1

您将更改绑定(bind)到选择，而不是其选项。您应该只将一个更改事件绑定(bind)到选择。这是一种简单的方法，无需重复大量代码。

// reference the select element
var sel = document.querySelector('#payment')
// add change event
sel.addEventListener('change', () => {
  // get the section that is active
  var paymentActive = document.querySelector('.payment-section.active')
  // if we have one hide it.
  if (paymentActive) paymentActive.classList.remove("active")
  // reference the option value that was selected
  var selection = sel.value
  // select the section based on the value
  var payment = document.querySelector("#" + selection)
  // show the section
  if (payment) payment.classList.add("active")
})

.payment-section {
  display: none;
}
.payment-section.active {
  display: block;
}

<select id="payment" name="user-payment">
  <option value="select method">Select Payment Method</option>
  <option value="CreditCard">Credit Card</option>
  <option value="PayPal">PayPal</option>
  <option value="Bitcoin">Bitcoin</option>
</select>

<div id="CreditCard" class="payment-section">Credit Card</div>
<div id="PayPal" class="payment-section">Pay Pal</div>
<div id="Bitcoin" class="payment-section">Bitcoin</div>