jQuery <select>选项只启用一些选项

Question

在选择其他选择器中的一个选项时，如何选择要禁用/启用哪个选择器/选项 例如： 我希望将它们全部禁用，除了“unit_block”，在我选择其中一个选项（A或B）后，“unit_row_big”将允许我选择任何选项，但“unit_row”将仅启用一些选项选项。 基本上这里是电子表格我想如何创建它。 我基本上都在工作，但它不是防弹的。 如何在块A（上面一个）中看到有4个更大的单元格（unit_row_big），块块B有3个。然后，块B中的一些较大的单元具有12个较小的单元（unit_row），但它们都具有5个较小的单元宽度（unit_column）。例如，如果我想在2-5位置创建Large（unit_size）单元格，它将与下一个大单元格冲突，所以我希望异常大小只有当unit_column为1时才可以使用大小如果unit_column为1或5每次都很小。 我在选择器中找到了几个禁用/启用选项的例子，但没有这个特别的。由于我对javascripts非常糟糕，我不知道如何创建一个，如果我至少可以编辑一个，我感觉很好。 电子表格 JSFiddle演示     ＆lt; div class =“form-group”＆gt;     ＆lt; select class =“selectpicker”name =“unit_block”id =“unit_block”＆gt;     ＆LT;选项＆gt;一种与LT; /选项＆GT;     ＆LT;选项＆GT; B＆LT; /选项＆GT;     ＆LT; /选择＆GT;     ＆LT; / DIV＆GT;     ＆lt; div class =“form-group”＆gt;     ＆lt; select class =“selectpicker”name =“unit_row_big”id =“unit_row_big”disable＆gt;     ＆LT;选项→1＆LT; /选项＆GT;     ＆LT;选项→2＆LT; /选项＆GT;     ＆LT;选项→3＆LT; /选项＆GT;     ＆LT;选项→4＆LT; /选项＆GT;     ＆LT; /选择＆GT;     ＆LT; / DIV＆GT;     ＆lt; div class =“form-group”＆gt;     ＆lt; select class =“selectpicker”name =“unit_row”id =“unit_row”＆gt;     ＆LT;选项→1＆LT; /选项＆GT;     ＆LT;选项→2＆LT; /选项＆GT;     ＆LT;选项→3＆LT; /选项＆GT;     ＆LT;选项→4＆LT; /选项＆GT;     ＆LT;选项→5＆LT; /选项＆GT;     ＆LT;选项→6＆LT; /选项＆GT;     ＆LT;选项大于7＆LT; /选项＆GT;     ＆LT;选项＆GT 8 LT; /选项＆GT;     ＆LT;选项＆GT; 9＆LT; /选项＆GT;     ＆LT;选项→10＆LT; /选项＆GT;     ＆LT;选项＆GT; 11＆LT; /选项＆GT;     ＆LT;选项＆GT; 12＆LT; /选项＆GT;     ＆LT; /选择＆GT;     ＆LT; / DIV＆GT;     ＆lt; div class =“form-group”＆gt;     ＆lt; select class =“selectpicker”name =“unit_column”id =“unit_column”＆gt;     ＆LT;选项→1＆LT; /选项＆GT;     ＆LT;选项→2＆LT; /选项＆GT;     ＆LT;选项→3＆LT; /选项＆GT;     ＆LT;选项→4＆LT; /选项＆GT;     ＆LT;选项→5＆LT; /选项＆GT;     ＆LT; /选择＆GT;     ＆LT; / DIV＆GT;     ＆lt; div class =“form-group”＆gt;     ＆lt; select class =“selectpicker”name =“unit_size”id =“unit_size”＆gt;     ＆LT;选项＆GT;小＆LT; /选项＆GT;     ＆LT;选项＆GT;中＆LT; /选项＆GT;     ＆LT;选项＆gt;轻便＆LT; /选项＆GT;     ＆LT; /选择＆GT;     ＆LT; / DIV＆GT;

Answer 1

你可以使用jQuery，但在纯JavaScript中这很容易。

您只需要监控所需的选择器，然后根据这些选项制作<ComboBox Name="imageCB" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}, Path=ImageTypes}" SelectedValuePath="Value" DisplayMemberPath="Key" > </ComboBox> 属性disabled。如果在第一个下拉列表中选择了true，我会在第二个下拉列表中禁用B。你应该能够轻松扩展它。

https://jsfiddle.net/ryanpcmcquen/6no3jyzb/

＆＃13;

＆＃13;

2

＆＃13;

document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  var unitBlock = document.querySelector('select#unit_block');
  var unitRowBig = document.querySelector('select#unit_row_big');

  unitBlock.addEventListener('change', function () {
    if (unitBlock.value === 'B') {
      // [1] is equal to option '2'
      unitRowBig[1].disabled = true;
    } else {
      unitRowBig[1].disabled = false;
    }
  });


});

＆＃13;

＆＃13;

＆＃13;