Is there a javascript solution for dependent select fields?

Question

I'm trying to set up a dependent field based on a referral select field. If one of the referral options are selected, I would like for my referral name field to appear in the form.

I have tried using javascript to solve for this issue, but keep getting hung up when trying to add additional values for the select field.

<div class="smartcapture-controls"><div class="sc-formfield-label"><label 
for="Hear About">How Did you Hear About Us? *</label></div>
<div class="sc-formfield-input">
 <select id="master-dependent" name="Hear About" data-field-type="Text" 
required="required" data-validation-message="Please fill out this 
field.">
  <option value="" selected="selected"></option>

  <option value="Through ICC">Through ICC</option>

  <option value="Through Triumph Business Capital">Through Triumph 
Business Capital</option>

  <option value="Through Another Triumph Employee">Through Another 
Triumph Employee</option>

  <option value="Through a Triumph Insurance Client">Through a Triumph 
Insurance Client</option>

  <option value="Online Search">Online Search</option>

  <option value="Social Media">Social Media</option>

 </select>
</div>
</div>

If any of the first 4 options are selected, I would like for it to display my referral field below

<div id="dependent" style="display:none;" class="smartcapture-controls"> 
 <div class="sc-formfield-label"><label for="Referral Name">Referral Name * 
 </label></div>
<div class="sc-formfield-input"><input type="text" name="Referral Name" 
data-field-type="Text" required="required" data-validation-message="Please fill out this field."></div>
</div>

This was the code I was trying below, but cannot seem to get my referral field to populate

<script>
function showHideReferral() {
    if(document.getElementByID("master-dependent").value=="Through ICC") {
        document.getElementById("dependent").style.display="block";

    } else {
        document.getElementById("dependent").style.display="none";
    }
}

</script>

The expected result is to have the referral field populate in the form if any of the first 4 options are selected. But currently, my referral field stays hidden no matter the selection.

Answer 1

Make sure that you call your show hide function in the onchange event, that you fix typos like getElementByID (correct is getElementById instead) and that your logic is correct. This is a tested solution:

  function showHideReferral() {
        if(document.getElementById("master-dependent").value.indexOf("Through") == 0) {
            document.getElementById("dependent").style.display="block";
    
        } else {
            document.getElementById("dependent").style.display="none";
        }
    }

<div class="smartcapture-controls"><div class="sc-formfield-label"><label 
    for="Hear About">How Did you Hear About Us? *</label></div>
    <div class="sc-formfield-input">
     <select onchange="showHideReferral()" id="master-dependent" name="Hear About" data-field-type="Text" 
    required="required" data-validation-message="Please fill out this 
    field.">
      <option value="" selected="selected"></option>
    
      <option value="Through ICC">Through ICC</option>
    
      <option value="Through Triumph Business Capital">Through Triumph 
    Business Capital</option>
    
      <option value="Through Another Triumph Employee">Through Another 
    Triumph Employee</option>
    
      <option value="Through a Triumph Insurance Client">Through a Triumph 
    Insurance Client</option>
    
      <option value="Online Search">Online Search</option>
    
      <option value="Social Media">Social Media</option>
    
     </select>
    </div>
    </div>
    
    <div id="dependent" style="display:none;" class="smartcapture-controls"> 
     <div class="sc-formfield-label"><label for="Referral Name">Referral Name * 
     </label></div>
    <div class="sc-formfield-input"><input type="text" name="Referral Name" 
    data-field-type="Text" required="required" data-validation-message="Please fill out this field."></div>
    </div>
    

Answer 2

add onchange="showHideReferral(this)" to select and

function showHideReferral(select) {
  let v = ["","Social Media","Online Search"];

  dependent.style.display = v.includes(select.value) ? "none" : "block";
}

function showHideReferral(select) {
  let v = ["","Social Media","Online Search"];
  
  dependent.style.display = v.includes(select.value) ? "none" : "block";
}

<div class="smartcapture-controls">
  <div class="sc-formfield-label"><label for="Hear About">How Did you Hear About Us? *</label></div>
  <div class="sc-formfield-input">
    <select id="master-dependent" name="Hear About" data-field-type="Text" required="required" data-validation-message="Please fill out this 
field." onchange="showHideReferral(this)">
      <option value="" selected="selected"></option>

      <option value="Through ICC">Through ICC</option>

      <option value="Through Triumph Business Capital">Through Triumph Business Capital</option>

      <option value="Through Another Triumph Employee">Through Another Triumph Employee</option>

      <option value="Through a Triumph Insurance Client">Through a Triumph Insurance Client</option>

      <option value="Online Search">Online Search</option>

      <option value="Social Media">Social Media</option>

    </select>
  </div>
</div>




<div id="dependent" style="display:none;" class="smartcapture-controls">
  <div class="sc-formfield-label"><label for="Referral Name">Referral Name * 
 </label></div>
  <div class="sc-formfield-input"><input type="text" name="Referral Name" data-field-type="Text" required="required" data-validation-message="Please fill out this field."></div>
</div>

Answer 3

You need to get the value of the select box as below and do the compare

<script>
function showHideReferral() {
    *if(document.getElementByID("master-dependent").options[e.selectedIndex].value=="Through ICC"){*
        document.getElementById("dependent").style.display="block";

    } else {
       document.getElementById("dependent").style.display="none";
    }
}