如果用户从选择框中选择一个选项，隐藏的 div 应该会出现

Question

所以如果用户从选择下拉列表中选择特定选项值，我会尝试显示一个 div。例如，如果用户在选择框中选择“trade”，那么带有公司名称的 div 应该出现，而包含“first name and last name”的 div 应该消失。如果用户在选择框中选择“客户”，则相反的情况会发生。这是我的代码

Javascript

var custDetails = document.getElementById('retCustDetails');
var tradeDetails = document.getElementById('tradeCustDetails');
var SelectMenu = document.getElementById('makeBooking');
if (makeBooking.value == trd) {
       document.getElementById('tradeDetails').style.display = 'block';
       document.getElementById('custDetails').style.display = 'none';
}
else {
    document.getElementById('custDetails').style.display = 'block';
}

HTML

<section id="makeBooking">
    <h2>Make booking</h2>
    Your details
    Customer Type:
    <select name="customerType">
        <option value="">Customer Type?</option>
        <option value="ret">Customer</option>
        <option value="trd">Trade</option>
    </select>

    <div id="retCustDetails" class="custDetails">
        Forename <input type="text" name="forename">
        Surname <input type="text" name="surname">
    </div>

    <div id="tradeCustDetails" class="custDetails" style="visibility:hidden">                   
        Company Name <input type="text" name="companyName">
    </div>

Answer 1

您应该使用if / else if 来处理用户可以选择的不同值 - 如果没有选择有效的选择，这也允许您默认隐藏所有 div

你可以在你的Select元素上使用.addEventListener('change', function ())在每次更新值时调用一个函数，然后你可以在函数内部使用this.value来访问被选元素的值

另外，请确保您使用' 或" 包装字符串 - 您使用的是makeBooking.value == trd，它正在检查名为trd 的变量，而不是您所瞄准的字符串'trd'对于

---

最后，您可以使用 CSS 默认隐藏您的 div，以便在选择时只显示正确的 div

.custDetails {
  display: none;
}

var custDetails = document.getElementById('retCustDetails');
var tradeDetails = document.getElementById('tradeCustDetails');
var SelectMenu = document.getElementById('makeBooking');

document.querySelector('select[name="customerType"]').addEventListener('change', function() {
  if (this.value == 'trd') {
    custDetails.style.display = 'none';
    tradeDetails.style.display = 'block';
  } else if (this.value == 'ret') {
    custDetails.style.display = 'block';
    tradeDetails.style.display = 'none';
  } else {
    custDetails.style.display = 'none';
    tradeDetails.style.display = 'none';
  }
});

.custDetails {
  display: none;
}

<section id="makeBooking">
  <h2>Make booking</h2>
  Your details Customer Type:
  <select name="customerType">
    <option value="">Customer Type?</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
  </select>

  <div id="retCustDetails" class="custDetails">
    Forename <input type="text" name="forename"> Surname <input type="text" name="surname">
  </div>

  <div id="tradeCustDetails" class="custDetails">
    Company Name <input type="text" name="companyName">
  </div>

Answer 2

首先，您的 JavaScript 中的名称与 HTML 中的 ids 名称不同。您还尝试使用 section 元素而不是 select 元素。

之后，您需要设置一个事件处理函数来处理select 发生更改时的情况。

另外，而不是使用内联样式。设置一个 CSS 类然后添加或删除它要简单得多。

最后，不要使用 HTML 标题元素 (h1...h6)，因为它应用了格式。格式化是用 CSS 完成的。选择正确的标题，因为它有意义。您不能将部分中的第一个标题设为h2，因为h2 是h1 的子部分。任何部分的第一个标题应始终为h1。

查看 cmets 内联：

var custDetails = document.getElementById('retCustDetails');
var tradeDetails = document.getElementById('tradeCustDetails');

// You must get a reference to the <select> element
var selectMenu = document.getElementById('customerType');

// Then, you must configure a JavaScript function to run as a "callback"
// to a specific event that the <select> element could trigger:
selectMenu.addEventListener("change", function(){

  // The value of the select will be a string, so you must wrap it in quotes
  if (selectMenu.value == "trd") {
    // Now, just add or remove the pre-made CSS class as needed.
    tradeDetails.classList.remove("hidden");
    custDetails.classList.add("hidden");
  } else {
    tradeDetails.classList.add("hidden") 
    custDetails.classList.remove("hidden");
  }
});

.hidden { display:none; }

<section id="makeBooking">
  <h1>Make booking</h1>
  Your details<br>
  Customer Type: 
  <select name="customerType" id="customerType">
    <option value="">Customer Type?</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
  </select>

  <div id="retCustDetails" class="custDetails hidden">
     Forename <input type="text" name="forename">
     Surname <input type="text" name="surname">
  </div>
  <div id="tradeCustDetails" class="custDetails hidden">
     Company Name <input type="text" name="companyName">
  </div>
</section>