If a user selects a option from the select box, hidden div should appear

Question

so I am trying to display a div if user select a specific option value from a select drop down list. for example, if the user selects "trade" in the select box then the div with the company name should come up while the div containing the "first name and last name" should disappear. and If the user selects the "customer" in the select box then the the opposite should happen. Here is my code

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

First, you had different names in your JavaScript than you had as ids in your HTML. You were also trying to work with the section element instead of the select element.

After that, you need to set up an event handling function to handle when the select gets changed.

Also, instead of working with inline styles. It's much simpler to set up a CSS class and then just add or remove it.

Finally, don't use an HTML heading element (h1...h6) because of the formatting applied to it. Formatting is done with CSS. Choose the right heading because it makes sense. You can't have the first heading in a section be an h2 because and h2 is for a subsection of an h1. The first heading in any section should always be h1.

See comments inline:

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>

Answer 2

You should be using an if / else if to handle the different values that the user could select - this also allows you to hide all the divs by default, if no valid selection is picked

You can use .addEventListener('change', function ()) on your Select element to call a function every time the value is updated, and then you can use this.value inside the function to access the selected element's value

Also, be sure that you're wrapping strings with ' or " - You were using makeBooking.value == trd, which is checking for a variable called trd, not the String 'trd' as you were aiming for

---

Finally, You could hide your divs by default using CSS, so that only the correct div is showing when selected

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