如何使用 Javascript 設置默認下拉值？

Question

我正在嘗試根據所選的下拉列表顯示 forms。 但是，默認情況下，我能夠看到所有 forms 都列在另一個下方。 只有當我點擊特定的下拉菜單時，我才會得到特定的下拉菜單 forms。我已經使用 CSS 將所有下拉字段設置為不顯示。不知道問題出在哪里。 我錯過了什么？ 我是一個初學者，剛剛處於學習階段，所以任何幫助將不勝感激。

表格：

 <div className="offcanvas-body"> <small className="card-text mb-3 text-white"> Choose an option below to perform a transaction </small> <select name="select-element" className="form-control my-3" id="type-select"> <option value ="none">-- Select Transaction Type --</option> <option value="payment">Payment</option> <option value="transfer">Transfer</option> <option value="deposit">Deposit</option> </select> {/* <:-- Card: Payment Card --> */} <div className="card payment-card"> <div className="card-body"> <div className="form-group mb-2"> <label htmlFor=""> Account Holder / Beneficiary</label> <input type="text" name="beneficiary" className="form-control" placeholder="Enter Account holder / Beneficiary name" /> </div> <div className="form-group mb-2"> <label htmlFor=""> Beneficiary Account Number</label> <input type="text" name="account_number" className="form-control" placeholder="Enter Beneficiary Account No" /> </div> <div className="form-group "> <label htmlFor="">Select Acc ``` ount</label> <select name="account_id" className="form-control" id="transact-type"> <option value="">-- Select Account --</option> </select> </div> <div className="form-group mb-2"> <label htmlFor="">Reference</label> <input type="text" name="reference" className="form-control" placeholder="Enter Reference" /> </div> <div className="form-group mb-2"> <label htmlFor="">Enter Payment Amount</label> <input type="text" name="payment_amount" className="form-control" placeholder="Enter Payment Amount" /> </div> <div className="form-group mb-2"> <button id="" className="btn-md transact-btn">Pay</button> </div> </div> </div> {/* Transfer Card */} <div className="card transfer-card"> <div className="card-body"> <div className="form-group "> <label htmlFor="">Select Account</label> <select h="transfer_from" className="form-control" id=""> <option value="">-- Select Account --</option> </select> </div> <div className="form-group "> <label htmlFor="">Select Account</label> <select name="transfer_to" className="form-control" id=""> <option value="">-- Select Account --</option> </select> </div> <div className="form-group mb-2"> <label htmlFor="">Enter Transfer Amount</label> <input type="text" name="transfer_amount" className="form-control" placeholder="Enter Transfer Amount" /> </div> <div className="form-group my-2"> <button id="" className="btn-md transact-btn">Transfer</button> </div> </div> </div> {/* Deposit card */} <div className="card deposit-card"> <div className="card-body"> <form action="" className="deposit-form"> <div className="form-group mb-2"> <label htmlFor="">Enter Deposit Amount</label> <input type="text" name="deposit_amount" className="form-control" placeholder="Enter Deposit Amount" /> </div> <div className="form-group "> <label htmlFor="">Select Account</label> <select name="account_id" className="form-control" id="transact-type"> <option value="">-- Select Account --</option> </select> </div> <div className="form-group my-2"> <button id="" className="btn-md transact-btn">Deposit</button> </div> </form> </div> </div> </div>

**CSS :** 

.payment-card{
    display: none ;
}

.transfer-card{
    display: none ;
}

.deposit-card{
    display: none ;
}


JS : 


// Get Transaction Type:
const typeSelect = document.getElementsByName("select-element")[0];
console.log(typeSelect);

// Get Transaction Forms:

const paymentCard = document.querySelector(".payment-card");
const transferCard = document.querySelector(".transfer-card");
const depositCard = document.querySelector(".deposit-card");

// Check For Transaction Type Event Listener:
typeSelect.addEventListener('change', () => {

       if (typeSelect.value == "none") {
              paymentCard.style.display = "none";
              transferCard.style.display = "none";
              depositCard.style.display = "none";
       }

       else if (typeSelect.value == "payment") {
              paymentCard.style.display = "block";
              transferCard.style.display = "none";
              depositCard.style.display = "none";
       }
       else if (typeSelect.value == "transfer") {
              transferCard.style.display = "block";
              paymentCard.style.display = "none";
              depositCard.style.display = "none";
       }
       else if (typeSelect.value == "deposit") {
              depositCard.style.display = "block";
              paymentCard.style.display = "none";
              transferCard.style.display = "none";
       }



});
// End Of Check For Transaction Type Evenet Listener.

Answer 1

我不會撒謊，我的解決方案可能有點老套，但我通常只是設置一個下拉符號，上面寫着“[選擇選項]”或類似的東西，我將它保存到一個適當名稱的變量中。 如果他們需要它的價值，我只是用一個 if 語句告訴他們他們需要選擇一些東西。

另一方面，如果您希望該值已經存在，則將該默認值作為您的第一個選項，只需在 function 之外的 javascript 內獲取 elementById.value，無論您在下拉菜單上的 select 發生什么變化。

如果你想讓 js 知道下拉菜單的值發生了變化，在同一個標簽上放

<select name="select-element" className="form-control my-3" id="type-select" onchange="myFunctionReactsOnChange()">

^注意我添加了“onchange”屬性，它導致 function 最后包含“()”。

希望它有所幫助。