Как скрыть элемент в зависимости от значения dropdown-button__button?

Question

[sasha_jarvi]

Имеется следующий выпадающий список:

<div class="dropdown-button dropdown">
       <button class="dropdown-button__button button dropdown-toggle" type="button" id="dropbutton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Москва</button>
                    <div id="city-dropdown" class="dropdown-button__wrap dropdown-menu dropdown-menu-right" aria-labelledby="dropbutton1">
                        <a class="dropdown-button__item dropdown-item" data-transport="" href="javascript:void(0)">Москва</a>
                        <a class="dropdown-button__item dropdown-item" data-transport="" href="javascript:void(0)">Калуга</a>
                    </div>
       </div>

Как при помощи jQuery скрыть .dropdown-button__item в зависимости от значения .dropdown-button__button? Например, если значение .dropdown-button__button - Москва, то скрываем элемент .dropdown-button__item со значением Москва

Answer 1

[Ragtime Kitty]

$('.dropdown-button__button').click(function() {
	$('.dropdown-button__item:contains('+$(this).text()+')').addClass('is-hidden');
});

Comments

[sasha_jarvi]

В 'is-hidden', полагаю, будет display : none?

[Ragtime Kitty]

Ну да. там уже скрывайте как вам надо. Можете сразу стиль вешать. Классом удобнее, как по мне, можно toggle сделать

[sasha_jarvi]

Сделал вот так:

$('.dropdown-button__button').click(function() {
        $('#city-dropdown .dropdown-button__item:contains('+$(this).text()+')').toggleClass('is-hidden');
    });

Но происходит следующее: при выборе варианта "Калуга" элемент #city-dropdown.dropdown-button__item скрывается, но при попытке выбрать оставшийся вариант из списка скрывается и второй элемент, в итоге в выпадающем списке не остается элементов. Буду думать, как это исправить

[Ragtime Kitty]

sasha_jarvi, вы этого не указывали в вопросе. Ваш звучал так:

Как скрыть элемент в зависимости от значения dropdown-button__button?

$('.dropdown-button__button').click(function() {
  $('.dropdown-button__item.is-hidden').removeClass('is-hidden');
  $('.dropdown-button__item:contains(' + $(this).text() + ')').addClass('is-hidden');
});

https://jsfiddle.net/o9aL7uyw/

[sasha_jarvi]

Ragtime_Kitty, прошу прощения, что не указал. Все получилось, спасибо за ответ!