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

Question

让我们看看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>

Answer 1

您的问题很难理解，但您可以使用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';
  }
}