Параметр jQuery <select> включает только некоторые параметры

Как выбрать, какой из селекторов / параметров я хочу отключить / включить, выбрав один из вариантов в других селекторах

Например:

Я хотел бы, чтобы все они были отключены, кроме «unit_block», после того, как я выберу один из вариантов (A или B), «unit_row_big» позволит мне выбрать любой из параметров, но «unit_row» позволит включить только некоторые из опции.

В основном вот таблица, как бы я хотел ее создать.

У меня есть все, что нужно, в основном, но это не пуленепробиваемый.

Как вы можете видеть в блоке A (верхний) есть 4 больших ячейки (unit_row_big), в блоке B есть 3 из них. Затем некоторые более крупные ячейки в блоке B имеют 12 меньших ячеек (unit_row), но все они имеют 5 меньших ячеек в ширину (unit_column). Например, если я хотел бы создать ячейку Large (unit_size) на 2-5-й позиции, она столкнулась бы со следующей большой ячейкой, поэтому я хотел бы иметь исключение, размер Large может использоваться только тогда, когда unit_column равен 1 Medium, если unit_column равен 1 или 5 и Маленький каждый раз.

Я нашел несколько вариантов отключения / включения в селекторах, но в этом нет ни одного конкретного. Поскольку я довольно плохо разбираюсь с javascripts, я понятия не имею, как его создать, и я чувствую себя хорошо, если могу, по крайней мере, отредактировать его.

таблица

Демо-версия JSFiddle

<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>

Solutions Collecting From Web of "Параметр jQuery <select> включает только некоторые параметры"

Вы можете использовать jQuery, но это довольно просто в чистом JavaScript.

Вам просто нужно следить за тем, какие селектора вы хотите, а затем сделать атрибут disabled true на основе этих вариантов. Я сделал небольшую скрипку, где, если в первом выпадающем списке выбран B , 2 во втором выпадающем списке отключен. Вы должны быть в состоянии легко расширить это.

Отключена опция, основанная на другом выпадающем меню.

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>