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

时间:2016-05-13 13:33:13

标签: javascript php jquery html

在选择其他选择器中的一个选项时,如何选择要禁用/启用哪个选择器/选项 例如: 我希望将它们全部禁用,除了“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;

1 个答案:

答案 0 :(得分:1)

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

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

Disabled option based on other dropdown.

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;