jQuery< select>选项只启用一些选项 [英] jQuery <select> option enable just some options
问题描述
如何选择我希望在其他选择器中选择其中一个选项时禁用/启用哪一个选择器/选项
例如：
除了unit_block之外，我想让它们全部禁用，选择其中一个选项（A或B）后，unit_row_big将允许我选择任何选项，但unit_row将只启用一些选项。
基本上这里是电子表格，我想如何创建它。
你在方块A（上面一块）中可以看到有4个更大的单元（unit_row_big）wile B块有3个。然后，块B中的一些较大的单元格具有12个较小的单元格（unit_row），但是它们全部具有5个较小的单元格宽度（unit_column）。例如，如果我想要在2-5位创建Large（unit_size）单元格，它将与下一个大单元格发生冲突，所以我希望有这样的例外：Large只能在unit_column为1时使用，如果unit_column为1或5和小每一次。
我在选择器中发现了几个禁用/启用选项的例子，但没有这个特别的例子。由于我对javascript很不好，所以我不知道如何创建一个，如果我至少可以编辑一个，我感觉很好。
https://jsfiddle.net/ryanpcmcquen/6no3jyzb/
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]等于选项'2'unitRowBig [1] .disabled = true;} else {unitRowBig [1]。 disabled = false;}}）;}）; < code>< / pre> ; form class =form-signinmethod =postid =register-form> < h2 class =form-signin-heading>单位说明< / h2> < hr /> < div id =error> <！ - 此处将显示错误！ - > < / DIV> < div class =form-group> < input type =textclass =form-controlname =unit_nameid =unit_name/> < / DIV> < div class =form-group> < input type =textclass =form-controlname =unit_groupid =unit_group/> < / DIV> < div class =form-group> < select class =selectpickername =unit_blockid =unit_block> <选项>一种与LT; /选项> <选项> B< /选项> < /选择> < / DIV> < div class =form-group> < select class =selectpickername =unit_row_bigid =unit_row_big> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> < /选择> < / DIV> < div class =form-group> < select class =selectpickername =unit_rowid =unit_row> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> <选项→5< /选项> <选项→6< /选项> <选项大于7< /选项> <选项> 8 LT; /选项> <选项> 9< /选项> <选项→10< /选项> <选项> 11< /选项> <选项> 12< /选项> < /选择> < / DIV> < div class =form-group> < select class =selectpickername =unit_columnid =unit_column> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→4< /选项> <选项→5< /选项> < /选择> < / DIV> < div class =form-group> < select class =selectpickername =unit_sizeid =unit_size> <选项>小< /选项> <选项>中< /选项> <选项>轻便< /选项> < /选择> < / DIV> < hr /> < div class =form-group text-center> < button type =submitclass =btn btn-defaultname =btn-saveid =btn-submit>插入< / button> < / div>< / form>
How do I choose which one selector/option I want to disable/enable while selecting one of options at other selectors
For example:
I would like to have them all disabled except for "unit_block", after I choose one of the option (A or B) "unit_row_big" will enable allowing me to chose any of the options, but "unit_row" will enable only some of the options.
Basically here is spreadsheet how I would like to create it.
I have everythink working basically, but it is not bulletproof.
How you can see in block A (upper one) there are 4 bigger cells (unit_row_big) wile block B have 3 of them. Then some bigger cells in block B have 12 smaller cells (unit_row) but all of them have 5 smaller cells wide (unit_column). For example if I would like to create Large (unit_size) cell on 2-5th position it would collide with next big cell so I would like to have exception that size Large can be used only when unit_column is 1 Medium if unit_column is 1 or 5 and Small every time.
I found few examples of disabling/enabling option in selectors but none this particular. Since I'm pretty bad with javascripts I have no idea how to create one, and I feel good if I can at least edit one.
<div class="form-group">
<select class="selectpicker" name="unit_block" id="unit_block" >
<option>A</option>
<option>B</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker" name="unit_row_big" id="unit_row_big" disable>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker" name="unit_row" id="unit_row">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker" name="unit_column" id="unit_column">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker" name="unit_size" id="unit_size">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</div>
You could use jQuery but this is pretty easy in pure JavaScript.
You just need to monitor whatever selectors you want and then make the disabled attribute true based on those choices. I made a small fiddle where if B is selected in the first dropdown, 2 is disabled on the second dropdown. You should be able to easily expand on that.
https://jsfiddle.net/ryanpcmcquen/6no3jyzb/
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;
}
});
});
<form class="form-signin" method="post" id="register-form">
<h2 class="form-signin-heading">Unit specification</h2>
<hr />
<div id="error">
<!-- error will be showen here ! -->
</div>
<div class="form-group">
<input type="text" class="form-control" name="unit_name" id="unit_name" />
</div>
<div class="form-group">
<input type="text" class="form-control" name="unit_group" id="unit_group" />
</div>
<div class="form-group">
<select class="selectpicker" name="unit_block" id="unit_block">
<option>A</option>
<option>B</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker" name="unit_row_big" id="unit_row_big">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker" name="unit_row" id="unit_row">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker" name="unit_column" id="unit_column">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker" name="unit_size" id="unit_size">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</div>
<hr />
<div class="form-group text-center">
<button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">Insert</button>
</div>
</form>
这篇关于jQuery< select>选项只启用一些选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
