Semantic UI dropdown change handler and disabling another element

Имеется два dropdown элемента с идентификаторами js-1 и js-2. Второй должен быть доступен только, если в первом выбрано определённое значение.

<div id="js-1" class="ui selection dropdown">
    <input name="first" type="hidden" value="two">
    <div class="text"></div>
    <i class="dropdown icon"></i>
    <div class="menu ui transition hidden">
        <div class="item" data-value="one">One</div>
        <div class="item" data-value="two">Two</div>
        <div class="item" data-value="three">Three</div>
    </div>
</div>
<div id="js-2" class="ui selection dropdown">
    <input name="second" type="hidden" value="six">
    <div class="text"></div>
    <i class="dropdown icon"></i>
    <div class="menu ui transition hidden">
        <div class="item" data-value="four">Four</div>
        <div class="item" data-value="five">Five</div>
        <div class="item" data-value="six">Six</div>
    </div>
</div>

Функцию обратного вызова на обработчик onChange можно повесит во время инициализации или после неё. Она принимает первым параметром новое значение.

// during init
$('#js-1').dropdown({
    onChange: function(newValue) {
        ...
    }
});

// after init
$('#js-1')
    .dropdown('setting', 'onChange', function(newValue){
        if (newValue == 'two') {
            $('#js-2').removeClass('disabled');
        } else {
            $('#js-2').addClass('disabled');
        }

    }); 

Похожие записи

Axios или fetch

Сравнение на примере GET/POST запросов, обработке ошибок и возможности задавать базовую конфигурацию.

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Поисковый запрос с помощью RxJS

Показательная и востребованная задача. Получение набираемого запроса из поля ввода через полсекунды после того, как пользователь закончил ввод с показом лоадера.

Добавить css link и js script динамически

const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';
link.integrity = 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO'; // необязательно
link.crossOrigin = 'anonymous'; // необязательно
document.head.appendChild(link);

const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
script.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'; // необязательно
s...