使用Java禁用某些下拉输入字段时出现问题

Question

我正在开发一个应用程序，在该应用程序中，我有一些具有选择下拉字段的卡。在Cards上，我编写了JavaScript逻辑，如果用户在任何Cards select下拉菜单中选择了妻子或丈夫作为选项，则其他丈夫或妻子下拉列表中的任何字段都应添加CSS类disable。

问题是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;

}

Answer 1

根据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中，建议在进行选择之前先使用占位符值，如下面的JSFiddle所示：