Question

我正在尝试基于引荐选择字段设置从属字段。如果选择了一个推荐人选项，我希望我的推荐人姓名字段显示在表单中。

我曾尝试使用javascript解决此问题，但是在尝试为select字段添加其他值时，总是挂断电话。

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

如果选择了前四个选项中的任何一个，我希望它在下面显示我的推荐字段

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

这是我在下面尝试的代码，但似乎无法使我的推荐字段填充

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

如果选择了前四个选项中的任何一个，则预期的结果是将引用字段填充为表格。但是目前，无论选择什么，我的推介字段都保持隐藏。

Answer 1

请确保在function事件中将您的秀皮onchange称为getElementByID（如getElementById则正确），并且您的逻辑是正确。这是一个经过测试的解决方案：

  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

将onchange="showHideReferral(this)"添加到select和

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

您需要获取以下选择框的值并进行比较

<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";
    }
}

是否有针对相关选择字段的JavaScript解决方案？

3 个答案: