如何用JavaScript设置下拉框默认值并修复表单默认显示异常

我想实现下拉框选中对应选项时才显示对应表单，默认状态下所有表单都隐藏。已经通过CSS把所有表单的display设为none，但默认状态下所有表单还是全部显示，只有点击下拉框选择选项后才能切换显示状态。作为编程新手，求帮忙排查问题。

表单代码 #

<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 Account</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 ;
}

JavaScript代码 #

// 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.

问题根源很明确：你写的HTML里用了className属性，这是React/JSX的专属语法，但纯HTML环境中，元素的类属性应该是class。浏览器不识别className，导致CSS里的.payment-card、.transfer-card、.deposit-card选择器找不到对应的元素，所以表单根本没被隐藏。

修复步骤：

1. 把HTML代码中所有的className替换成class，比如：
   • <div className="offcanvas-body"> → <div class="offcanvas-body">
   • <select name="select-element" className="form-control my-3" id="type-select"> → <select name="select-element" class="form-control my-3" id="type-select">
   • 所有其他带className的元素都要修改。
2. （可选优化）页面加载时，确保默认执行一次隐藏逻辑，避免极端情况（比如CSS加载延迟）：
   在JavaScript代码末尾添加一段初始化代码：

   // 页面加载时默认隐藏所有表单
   window.addEventListener('load', () => {
       paymentCard.style.display = "none";
       transferCard.style.display = "none";
       depositCard.style.display = "none";
   });
   

改完之后，默认状态下所有表单会被CSS隐藏，选择下拉框选项时也能正常切换显示对应的表单了。

内容的提问来源于stack exchange，提问作者Bhar