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');
        }

    }); 

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

HTML атрибуты и DOM свойства

  • Значение HTML атрибута указывает начальное значение;
  • Значение DOM свойства является текущим значением;
  • Атрибуты инициализируют DOM свойства.

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