Show and hide div with select option?

JavaScript
1

Example:

<label>Show div?</label>
<select>
<option>yes</option>
<option>no</option>
</select>

<div class="show and hide this div when toggling yes and no on selectbox">
some other select boxes with different options
</div>

If someone take the option YES, then div under will show, and if the user changes his option to NO, i want it to be hidden again. In fact I want to make all the options he first choose in the hidden div to be obsolete and don’t show in the email output.

So if he choose NO i don’t want the extra fields/options in the hidden div to be shown in the email-output, only if he choose YES and fills them out.

Hope someone understand what Im trying to convey, my english isn’t the best.

2

Use onchange to attach an event listener to the select element.

Example:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Select onchange</title>
    <style>.hidden{ display: none; }</style>
  </head>
  
  <body>
    <label for="mySelect">Show div?</label>
    <select id="mySelect">
      <option>Yes</option>
      <option>No</option>
    </select>
     
    <div id="myDiv">
      <p>Some other select boxes with different options.</p>
    </div>
    
    <script>
    var sel = document.getElementById('mySelect'),
        div = document.getElementById('myDiv');
        
    sel.onchange = function(){
      if (div.className.match("hidden")){
        div.className = "";
      } else {
        div.className = 'hidden';
      }
    }
    </script>
  </body>
</html>

So if he choose NO i don’t want the extra fields/options in the hidden div to be shown in the email-output, only if he choose YES and fills them out.

I don’t know what you mean by “email-output”.
If you don’t want form fields to submit with a form, disable them:

document.getElementById('myCheckbox').disabled=true;