如何根据在上一个“选择”元素上选择的内容对要锁定的“选择”元素上显示的某些值进行编码

Question

是否有可能根据在先前的“选择”元素上选择的内容进行编码，以锁定“选择”元素上显示的某些值。例如如果客户在“选择”元素行1（例如下面图像链接中第一个设备的蜂窝式计划）中选择了家庭计划主线（在下面的图像链接中突出显示），则在其他“选择”元素线上选择计划时（例如下面图像链接中第二个设备的蜂窝式计划），不再可以选择“家庭计划-主线”，但可以选择所有其他计划，例如“家庭计划-附加线”。
我似乎无法找到一个可靠的解决方案，但是我并不是js方面的佼佼者，所以希望你们中的一个可以指出正确的方向。

谢谢：）

编辑：这是我使用的费用计算器： http://documentation.bold-themes.com/cost-calculator/whats-in-the-box/

Answer 1

是-使用disabled属性：

document.getElementById("one").addEventListener("change", e => {
  document.getElementById("two").querySelectorAll("option").forEach(o => {
    if ((e.target.value == "even" && parseInt(o.value) % 2 != 0) || (e.target.value == "odd" && parseInt(o.value) % 2 == 0)) {
      o.disabled = "disabled";
    } else {
      o.disabled = "";
    }
  });
});

<select id="one">
  <option value="even">Even numbers</option>
  <option value="odd">Odd numbers</option>
</select>
<select id="two">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

Answer 2

如果您使用的是普通的旧javascript，则可以执行以下操作：

const select1 = document.getElementById('select1');
const select2 = document.getElementById('select2');


select1.addEventListener('change', function(event) {
    if(event.target.value === "1") {
        select2.querySelector('option[value="1"]').disabled = true;
        select2.querySelector('option[value="2"]').disabled = false;
        select2.querySelector('option[value="3"]').disabled = true;
    }
    else {
        select2.querySelector('option[value="1"]').disabled = false;
        select2.querySelector('option[value="2"]').disabled = true;
        select2.querySelector('option[value="3"]').disabled = false;
    }
});

<select id="select1">
<option value="1">Disable 1 and 3</option>
<option value="2">Disable 2</option>
</select>

<select id="select2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>