使用Javascript从选择下拉列表中禁用某些选项字段的问题

Question

我正在开发一个应用程序，在该应用程序中，我有一些具有选择下拉字段的卡。在Cards上，我编写了JavaScript逻辑，如果用户在第一个Card select下拉菜单中选择了妻子作为选项，则第二个下拉的妻子字段将被禁用，这很好。问题出在第三张卡上，它没有被禁用。基本上我想当用户在第一张卡上选择妻子选项时，应立即禁用其他卡上的所有其他妻子选项标记代码<!-- Card 1 -->    **<form method="POST" action="#" id="phase3">            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">            <!-- Gender -->            <div class="row registerRelationph3">                <label class="fm-input"> Relation :</label>                <select class="fm-input firstMenu" id="relation1" required>                    <option value="Husband"> Husband </option>                    <option value="Wife"> Wife </option>                    <option value="Son"> Son </option>                    <option value="Daughter"> Daughter </option>                </select>            </div>            <!-- END -->            <!-- DOb -->            <div class="row">            <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>            <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>            </div>            <!-- END dob -->             <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>    </form>    <!-- End card 1 -->    <!-- Card 2-->    <form method="POST" action="#" id="phase3">            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">            <!-- Gender -->            <div class="row registerRelationph3">                <label class="fm-input otherMenu"> Relation :</label>                <select class="fm-input" id="relation1" required>                    <option value="Husband"> Husband </option>                    <option value="Wife"> Wife </option>                    <option value="Son"> Son </option>                    <option value="Daughter"> Daughter </option>                </select>            </div>

Answer 1

有两件事是错误的：

1. 您的otherMenu课程已在上，<label>而不是<select>第二张卡上

2. 您需要使用querySelectorAll()和迭代元素集合。querySelector()只会选择第一个匹配元素。

document.querySelector('.firstMenu').addEventListener('change', function() {

  var selectedOption = this.value;

  var otherSelectOptions = document.querySelectorAll('.otherMenu option');

  otherSelectOptions.forEach(function(option) {

    option.disabled = option.value === selectedOption;

  });

});

<!-- Card 1 -->

<form method="POST" action="#" id="phase3">

  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

  <!-- Gender -->

  <div class="row registerRelationph3">

    <label class="fm-input"> Relation :</label>

    <select class="fm-input firstMenu" id="relation1" required>

      <option value="Husband"> Husband </option>

      <option value="Wife"> Wife </option>

      <option value="Son"> Son </option>

      <option value="Daughter"> Daughter </option>

    </select>

  </div>

  <!-- END -->

  <!-- DOb -->

  <div class="row">

    <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>

    <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>

  </div>

  <!-- END dob -->

  <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>

</form>

<!-- End card 1 -->

<!-- Card 2-->

<form method="POST" action="#" id="phase3">

  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

  <!-- Gender -->

  <div class="row registerRelationph3">

    <label class="fm-input"> Relation :</label>

    <select class="fm-input otherMenu" id="relation1" required>

      <option value="Husband"> Husband </option>

      <option value="Wife"> Wife </option>

      <option value="Son"> Son </option>

      <option value="Daughter"> Daughter </option>

    </select>

  </div>

  <!-- END -->

  <!-- DOb -->

  <div class="row">

    <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>

    <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>

  </div>

  <!-- END dob -->

  <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>

</form>

<!-- End card 2-->

<!-- Card 3-->

<form method="POST" action="#" id="phase3">

  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

  <!-- Gender -->

  <div class="row registerRelationph3">

    <label class="fm-input"> Relation :</label>

    <select class="fm-input otherMenu" id="relation1" required>

      <option value="Husband"> Husband </option>

      <option value="Wife"> Wife </option>

      <option value="Son"> Son </option>

      <option value="Daughter"> Daughter </option>

    </select>

  </div>

  <!-- END -->

  <!-- DOb -->

  <div class="row">

    <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>

    <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>

  </div>

  <!-- END dob -->

  <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>

</form>

<!-- End card 3-->