Отключить опцию dropdownlist с другой опцией dropdownlist

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

Вам нужно изменить свой код JavaScript

<script type="application/x-javascript">

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

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

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

}
</script>

Answer 2

Вместо этого вы можете прикрепить событие change в своем коде JS, а затем использовать 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>