How to set a default dropdown value using Javascript?

Question

I am trying to display forms based on the dropdown selected. But, by default, I am able to see all the forms listed one below other. Only if I click on the particular dropdown, I am getting the dropdown specific forms. I have set display none to all the dropdown fields using CSS. Don't know where the problem is arising. What am I missing out? Iam quite a beginner & just in learning stage so any help would be much appreciated.

The form:

 <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

I am not gonna lie, my solution may be a bit hacky but I usually just set a drop down sign that says "[chose option]" or something similar where I save it to a variable of appropriate name. If they needed a value from it, I just use an if statement to tell them that they need to chose something.

On the other hand, if you want the value to already be there, have that default value to be your first option and just get elementById.value within javascript outside a function that changes on whatever you select on the dropdown menu.

If you want the js to know that the dropdown has had the value change, on the same tag put

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

^Notice I added "onchange" attribute which leads to a function that includes the "()" at the end.

Hope it helped.