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>
            <!-- 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-->**

JavaScript代码

document.querySelector('.firstMenu').addEventListener('change', function () {
    document.querySelector('.otherMenu option[value="Wife"]').disabled = this.value === 'Wife';     
});

Answer 1

两件事错了：

第二张卡上的otherMenu类是<label>，而不是第二张卡的<select>
您需要使用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-->

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

1 个答案: