javascript - 使用其他下拉列表选项禁用下拉列表选项

Question

这是我正在尝试做的事情:如果我从下拉列表“selectOption1”中选择某项，我想将另一个下拉列表“selectOption2”中的选项设置为“不可见”。不幸的是，我无法在另一个列表中正确定位该元素。

multiCapture.html

function setAnrede() {
  var ddl = document.getElementById("selectOption1");
  var selectedValue1 = ddl.options[ddl.selectedIndex].value;

  var ddl = document.getElementById("selectOption2");
  var selectedValue2 = ddl.options[ddl.selectedIndex].value;

  if (selectedValue1 == 'Männlich') {
    selectedValue2.options[2].style.display = "none";
  }
}

<form>
  <div class="table-wrapper">
    <div class="table-scroll">
      <table id="myTable">
        <tr>
          <th>Geschlecht</th>
          <th>Anrede</th>
          <th>Titel</th>
          <th>Vorname</th>
          <th>Nachname</th>
          <th>E-Mail</th>
        </tr>
        <tr>
          <td>
            <div class="input-field">
              <select id="selectOption1" required onchange="setAnrede()">
                <option value="Bitte auswählen" selected>Bitte auswählen</option>
                <option value="Männlich">Männlich</option>
                <option value="Weiblich">Weiblich</option>
              </select>
              <label>Geschlecht angeben:</label>
            </div>
          </td>
          <td>
            <div class="input-field">
              <select id="selectOption2" required>
                <option value="Bitte auswählen" selected>Bitte auswählen</option>
                <option value="Sehr geehrter">Sehr geehrter</option>
                <option value="Lieber">Lieber</option>
                <option value="Werter">Werter</option>
                <option value="Hallo">Hallo</option>
              </select>
              <label>Anrede angeben:</label>
            </div>
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</form>

Answer 1

您可以在 JS 代码中附加 change 事件，然后使用 eq() 根据索引选择您想要的选项，例如:

jQuery 解决方案:

$('#selectOption1').on('change', setAnrede);

function setAnrede() {
  var ddl = $("#selectOption1");
  var dd2 = $("#selectOption2");

  if ($(this).val() === 'Männlich') {
    dd2.find('option:eq(2)').hide();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="table-wrapper">
    <div class="table-scroll">
      <table id="myTable" border=1>
        <tr>
          <th>Geschlecht</th>
          <th>Anrede</th>
          <th>Titel</th>
          <th>Vorname</th>
          <th>Nachname</th>
          <th>E-Mail</th>
        </tr>
        <tr>
          <td>
            <div class="input-field">
              <select id="selectOption1" required>
                <option value="Bitte auswählen" selected>Bitte auswählen</option>
                <option value="Männlich">Männlich</option>
                <option value="Weiblich">Weiblich</option>
              </select>
              <label>Geschlecht angeben:</label>
            </div>
          </td>
          <td>
            <div class="input-field">
              <select id="selectOption2" required>
                <option value="Bitte auswählen" selected>Bitte auswählen</option>
                <option value="Sehr geehrter">Sehr geehrter</option>
                <option value="Lieber">Lieber</option>
                <option value="Werter">Werter</option>
                <option value="Hallo">Hallo</option>
              </select>
              <label>Anrede angeben:</label>
            </div>
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</form>

纯Js方案

document.getElementById("selectOption1").addEventListener("click", setAnrede);

function setAnrede() {
  var ddl = document.getElementById("selectOption1");
  var dd2 = document.getElementById("selectOption2");

  var selectedValue1 = ddl.options[ddl.selectedIndex].value;

  if (selectedValue1 == 'Männlich') {
    dd2.options[2].style.display = "none";
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="table-wrapper">
    <div class="table-scroll">
      <table id="myTable" border=1>
        <tr>
          <th>Geschlecht</th>
          <th>Anrede</th>
          <th>Titel</th>
          <th>Vorname</th>
          <th>Nachname</th>
          <th>E-Mail</th>
        </tr>
        <tr>
          <td>
            <div class="input-field">
              <select id="selectOption1" required>
                <option value="Bitte auswählen" selected>Bitte auswählen</option>
                <option value="Männlich">Männlich</option>
                <option value="Weiblich">Weiblich</option>
              </select>
              <label>Geschlecht angeben:</label>
            </div>
          </td>
          <td>
            <div class="input-field">
              <select id="selectOption2" required>
                <option value="Bitte auswählen" selected>Bitte auswählen</option>
                <option value="Sehr geehrter">Sehr geehrter</option>
                <option value="Lieber">Lieber</option>
                <option value="Werter">Werter</option>
                <option value="Hallo">Hallo</option>
              </select>
              <label>Anrede angeben:</label>
            </div>
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</form>