使用JavaScript

Question

我正在处理一个应用程序，其中我有一些具有 选择下拉字段。在卡片上，我写了一个JavaScript 用户选择妻子或丈夫作为选择的逻辑 在任何卡上选择下拉菜单，其他任何丈夫 或“妻子”下拉字段应添加一个禁用的CSS类。

问题是 CSS类没有添加在与丈夫或妻子匹配的卡片上的其他选项上。基本上，我希望当用户在任何卡上选择“妻子或丈夫”选项时，其他卡上的所有其他丈夫或妻子选项都应更改要禁用的类（指针指向无）。

我的代码：

var menus = document.querySelectorAll('.otherMenu');
for (let menu of menus) {
  menu.addEventListener('change', function() {
    var selectedOption = this.value;
    var selectWife = document.querySelectorAll('.otherMenu option[value="Wife"]');
    var selectHusband = document.querySelectorAll('.otherMenu option[value="Husband"]');
    selectWife.forEach(function(option) {
      var change1 = option.classList.add('disabled');
      change = selectedOption === 'Wife';
    });
    selectHusband.forEach(function(option) {
      var change2 = option.classList.add('disabled');
      change2 = selectedOption === 'Husband';
    });
  });
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
  color: blue;
}

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

Answer 1

根据linked question from Maaz，您无法设置单个option元素的样式（color / background-color除外）。但是，对于此用例，您不需要，option具有disabled属性，该属性可以执行您想要的操作：禁用选择并淡入选项。

Javascript：

var menus = document.querySelectorAll('.otherMenu');
for (let menu of menus) {
  menu.addEventListener('change', function() {
    var selectedOption = this.value;
    var thisMenu = this;
    var selectWife = document.querySelectorAll('.otherMenu option[value="Wife"]');
    var selectHusband = document.querySelectorAll('.otherMenu option[value="Husband"]');
    selectWife.forEach(function(option) {
      if(!(thisMenu === option.parentNode)){
        if(selectedOption === 'Wife'){
            option.disabled = true;
        }
      }
    });
    selectHusband.forEach(function(option) {
      if(!(thisMenu === option.parentNode)){
        if(selectedOption === 'Husband'){
            option.disabled = true;
        }
      }
    });
  });
}

CSS：

.other-menu option:disabled {
  color: blue;
}

注意：您将otherMenu类分配不正确，并没有正确放置在HTML中，建议您在进行选择之前使用占位符值，例如this JSFiddle：