Javascript 在联系人表单7中选择下拉列表后显示输入字段

嗨，伙计们，我正在使用Wordpress联系人表单7插件，并试图实现：如果选择了下拉列表，则显示文本字段

我现在通过Wordpress页面中的Visual composer使用以下原始JS，在联系人表单7中添加了下拉列表作为id：

var x = document.getElementById("dropdown");
if(x.value = "Other") {
 alert('Enter your js here!');
}

---

对于任何寻求更简单解决方案的人。在contact form 7中，您可以简单地添加内联JavaScript

只要不在脚本中添加空行，添加到表单生成器的JavaScript将在前端呈现

以下是来自CF7表单编辑器的副本：

<label> Your Name (required)
[text* your-name] </label>

<label> Your Email (required)
[email* your-email] </label>

<label> Your Favorite Color
[select drop-down-menu id:FavoriteColorDropDown "Pink" "Red" "Purple" "Other"] </label>

<label id="EnterFavoriteColorLabel"> Please Specify Your Favorite Color
[text favorite-color] </label>

[submit "Send"]

<script language="javascript" type="text/javascript">
// Hide the favorite-color text field by default
document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
// On every 'Change' of the drop down with the ID "FavoriteColorDropDown" call the displayTextField function
document.getElementById("FavoriteColorDropDown").addEventListener("change", displayTextField);
  function displayTextField() {
    // Get the value of the selected drop down
    var dropDownText = document.getElementById("FavoriteColorDropDown").value;
    // If selected text matches 'Other', display the text field.
    if (dropDownText == "Other") {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'block';
    } else {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
    }
  }
</script>

希望有帮助

---

如果您对阅读更多或扩展单选按钮的内容感兴趣，我最近发表了一篇文章，其中包含了更多的代码示例和示例

适用于任何寻求更简单解决方案的人。在contact form 7中，您可以简单地添加内联JavaScript

只要不在脚本中添加空行，添加到表单生成器的JavaScript将在前端呈现

以下是来自CF7表单编辑器的副本：

<label> Your Name (required)
[text* your-name] </label>

<label> Your Email (required)
[email* your-email] </label>

<label> Your Favorite Color
[select drop-down-menu id:FavoriteColorDropDown "Pink" "Red" "Purple" "Other"] </label>

<label id="EnterFavoriteColorLabel"> Please Specify Your Favorite Color
[text favorite-color] </label>

[submit "Send"]

<script language="javascript" type="text/javascript">
// Hide the favorite-color text field by default
document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
// On every 'Change' of the drop down with the ID "FavoriteColorDropDown" call the displayTextField function
document.getElementById("FavoriteColorDropDown").addEventListener("change", displayTextField);
  function displayTextField() {
    // Get the value of the selected drop down
    var dropDownText = document.getElementById("FavoriteColorDropDown").value;
    // If selected text matches 'Other', display the text field.
    if (dropDownText == "Other") {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'block';
    } else {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
    }
  }
</script>

希望有帮助

---

如果您对阅读更多或扩展单选按钮的内容感兴趣，我最近发表了一篇文章，其中包含了更多的代码示例和示例

可能重复我提到的我使用的是Contact Form 7 Wordpress插件，其中我无法控制Contact formYup的HTML，这正在工作感谢Lalji可能重复我提到的我使用Contact Form 7 Wordpress插件，其中我无法控制Contact formYup的HTML，这正在工作感谢Lalji