Semantic UI dropdown change handler and disabling another element

Опубликовано в JavaScript • 14 января 2018 г. • 1 мин. на чтение

Имеется два 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');
        }

    });

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

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

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

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

RxJS. Delay from array 

import { of, from } from 'rxjs'; 
import { map, concatMap, delay } from 'rxjs/operators';

from([2,4,6,8]).pipe(
  concatMap(item => of(item).pipe(delay(1000)))
).subscribe(console.log);