使用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所示：