如何从下拉列表中获取价值

时间:2018-04-20 02:53:19

标签: javascript dom contact-form-7

让我们看看https://sisschools.org/contact-us-3/

选择收件人并请指定您的参与者。

如果我选择除SIS Bona Vista之外,则隐藏在列旁边。但它不起作用。

    <div class="edgt-grid-col-6"><label>Choose your recipient </label>
                [select* select-a-schools id:SelectSchools "SIS Bona Vista" "SIS Kelapa Gading" "SIS Pantai Indah Kapuk" "SIS Cilegon" "SIS Semarang" "SIS Palembang" "SIS Medan"]
        </div>

<div id="SelectBv" class="edgt-grid-col-6">
<label> Please Specify Your Reicipient </label>
[select* select-a-bv include_blank "Techer" "Student" "General"] 
</div>

这是JavaScipt代码:

<script language="javascript" type="text/javascript">
// Show the Text field by default
document.getElementById('SelectBv').style.display = 'true';
document.getElementById('SelectSchools').addEventListener('change', displayTextField);
function displayTextField() {
  // Get the value of the currently selected dropdown. 'select-a-schools' is the name of the dropdown you specify in the form builder
  var cmbSchool = document.querySelector('input[name="select-a-schools"]:select').value;
  if (cmbSchool == 'SIS Bona Vista') {
    document.getElementById('SelectBv').style.display = 'true';
  } else {
    document.getElementById('SelectBv').style.display = 'none';
  }
}
</script>

1 个答案:

答案 0 :(得分:0)

很难理解您的问题,但您可以使用document.getElementsByClassName("styledSelect")[0].innerHTML来获取下拉框的选定值,因此它看起来如下...

document.getElementById('SelectBv').style.display = 'true';
document.getElementById('SelectSchools').addEventListener('change', displayTextField);
function displayTextField() {
  var cmbSchool = document.getElementsByClassName("styledSelect")[0].innerHTML;
  if (cmbSchool == "SIS Bona Vista") {
    document.getElementById('SelectBv').style.display = 'true';
  } else {
    document.getElementById('SelectBv').style.display = 'none';
  }
}