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

JS. Get query param 

function getQueryParam(item) {
  var svalue = window.location.search.match(new RegExp('[\?\&]' + item + '=([^\&]*)(\&?)', 'i'));
  return svalue ? svalue[1] : svalue;
}

// /foo/bar/baz.html?lang=ru
var lang = getQueryParam('lang') || 'en';

Не ставить фокус по клику

Проблема заключалась в следующем: когда имеется интерактивный элемент с :focus стилем и вы щелкаете по этому элементу, на нём остаётся focus стиль (outline обводка). У нативной кнопки всё работает as expected, но стоит её добавить любой стиль и, как побочный эффект, меняется её поведение.