如何在我的选择字段中显示/隐藏某些选项?

时间:2019-08-10 21:23:53

标签: javascript jquery performance

我正在尝试尽快公开我的网站以进行自由职业。但是我不知道该怎么写脚本。我知道没有多少人知道这个称为Webflow的网站(将您的设计转换为编码,而不是在进行Web设计/构建时反之),但是我正在使用它。该网站不具备根据查看者的选择更改表单选择以显示/隐藏选项的功能。

对于确实使用Webflow的用户, here 是只读预览。滚动到“与我联系”以选择要编写的脚本。

展开时具有的选择选项是

  • 选择一个
  • 问一个问题
  • 有一个问题要问,我有一个隐藏的文本框,希望它显示 当您选择“问问题”

  • 订购佣金

  • 要订购佣金,我需要文本框和“提交”按钮 隐藏
每个表单字段ID的

ID和值:选择

  • “选择一个...-值为0”
  • “问一个问题-值1”
  • “订购佣金-值2”

文本框ID:文本框Q值:q-box

佣金ID:佣金按钮值:4

提交按钮ID:提交表单值:5

1 个答案:

答案 0 :(得分:0)

这是为您提供的jQuery解决方案,因此您需要在代码中包含jQuery库才能使用它(对于初级用户,jQuery很容易学习:www.jquery.com)

我不会将此代码称为sistine小教堂,但这可以完成工作。

function hideDynamicFields() {
  $('#dynamic-fields').children().hide();
}

$('#service').on('change', function(){
  hideDynamicFields();
  var choice = $(this).val();
  if(choice == 'question') {
    $('input[name=question]').show();
  } else if(choice =='commission') {
    $('textarea[name=commission]').show();
  }
});
#dynamic-fields input,
#dynamic-fields textarea {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="service">
  <option></option>
  <option value="question">Ask a question</option>
  <option value="commission">Order a Commission </option>
</select>
<div id="dynamic-fields">
  <input type="text" name="question" />
  <textarea name="commission"></textarea>
</div>