title: Toggle input fields based on select value - jQuery and HTML
body: <p>So I have the following input fields, which by default are hidden. </p>
  
  <p>When the user selects an industry, the corresponding field should be visible. Of course, if the selection changes, the previous field should toggle back to hidden, and the new selection toggled to show. </p>
  
  <p>I understand I could just have a conditional inside the jquery that toggles the input i.e.</p>
  
  <pre><code>if(selection == "SaaS") {
     $("#SaaSMeetings").show();
  }
  </code></pre>
  
  <p>However, I am not sure how I can get the fields to toggle on each "change" event, based on the dropdown select. </p>
  
  <p>Thanks for any help in advance! </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;label for=""&gt;Industry?&lt;/label&gt;
      &lt;select id="industry"&gt;
          &lt;option value="Telesales"&gt;Telesales&lt;/option&gt;
          &lt;option value="Media"&gt;Media/Advertising&lt;/option&gt;
          &lt;option value="SaaS"&gt;SaaS&lt;/option&gt;
          &lt;option value="Insurance"&gt;Insurance&lt;/option&gt;
          &lt;option value="Automobile"&gt;Automobile&lt;/option&gt;
      &lt;/select&gt;
  
  &lt;!-- Show Metric Input based on Industry Selection --&gt;
  
  &lt;input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none"&gt;
  &lt;input type="text" id="SaaSMeetings"  placeholder="How many meetings?" style="display:none"&gt;
  &lt;input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none"&gt;
  &lt;input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none"&gt;
  </code></pre>
  
  <p><strong>The javascript:</strong></p>
  
  <pre><code>$('#industry').on('change',function(){
  
    var selection = $(this).val(); 
    console.log("Detected change..." + selection);
  
    //TODO: Show the input field based on this selection, and on each change, make sure the correct field is displayed.
  });
  </code></pre>