表格7中的条件字段不起作用

Question

在我的联系方式中，我需要一滴量的订单。在选择“其他”时，我希望显示一个数字字段以供输入。下面是我的代码，但不起作用。有人能帮忙吗？提前谢谢。

<script language="javascript" type="text/javascript">
document.getElementById("OrderQuantity").addEventListener("change", displayNumberField);
  function displayNumberField() {
    var dropDownText =  document.getElementById("OrderQuantity").value;
    if (dropDownText == "Other") {
      document.getElementById("EnterOtherQuantity").style.display = 'block';
    } else {
      document.getElementById("EnterOtherQuantity").style.display = 'none';
    }
  }
</script>

<label> Order Quantity
[select* drop-down-menu id=OrderQuantity "Select Quantity" "10" "20" "30" "40" "Other"] </label>

<label id="EnterOtherQuantity" style="display:none;"> Please Specify Your Order Quantity
[number other-order-quantity min:41] </label>

Answer 1

您可以尝试此附加项来创建条件字段。https://nl.wordpress.org/plugins/cf7-conditional-fields/

Answer 2

请注意，选择*下拉菜单id=“OrderQuantity” CF7短代码不会为select输出任何id，因此不能使用document.getElementById，但可以依赖document.getElementById属性：

<label> Order Quantity
[select* drop-down-menu id=OrderQuantity "Select Quantity" "10" "20" "30" "40" "Other"] </label>

<label id="EnterOtherQuantity" style="display:none;"> Please Specify Your Order Quantity
[number other-order-quantity min:41] </label>

[submit "Send"]

<script language="javascript" type="text/javascript">
document.getElementsByName("drop-down-menu")[0].addEventListener("change", displayNumberField);

function displayNumberField() {
  var dropDownText =  document.getElementsByName("drop-down-menu")[0].value;
  if (dropDownText == "Other") {
    document.getElementById("EnterOtherQuantity").style.display = 'block';
  } else {
    document.getElementById("EnterOtherQuantity").style.display = 'none';
  }
}
</script>