如何從下拉菜單中獲取價值

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';
  }
}