Форум

orange8031 · #1 (**permalink**) 09.09.2019, 16:11

Добрый день! Ребята, подскажите пожалуйста как правильно запихнуть в .filter opt

$('.btn').on('click', function () {
	$( "#select option" ).each(function( index ) {
	var opt = ':not([data-value=' + $( this ).val() + ']),';
	$('#select-ul').next().children('ul').children('li').filter(opt).hide();
});
});

SuperZen · #2 (**permalink**) 09.09.2019, 16:25

Type: Function( Integer index, Element element ) => Boolean
A function used as a test for each element in the set. this is the current DOM element.

function opt(index, element) {
  return ':not([data-value=' + $( this ).val() + ']),'
}

может быть так, надо проверять.

orange8031 · #3 (**permalink**) 09.09.2019, 16:33

Не работает, прячет все.

SuperZen · #4 (**permalink**) 09.09.2019, 16:43

<html>

<head>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
    $(document).ready(function () {
      console.log("document loaded");
      $('.select').children('option').filter(`:not([data-value="hide"])`).hide() // missing "" ?
    })
  </script>
</head>

<body>
  <select class="select">
    <option data-value="hide">hide</option>
    <option data-value="show">show</option>
  </select>
</body>

</html>

кто такой $(this).val() ?

orange8031 · #5 (**permalink**) 09.09.2019, 16:55

нужно в цикле пройти по всем option в select взять их value там есть white, black и тд. есть список который копирует эти опции и добавляет li data-value=white, black и тд. Мне нужно проверить после клика что осталось в этом select и спрятать все li кроме data-value которые совпадают с option value

Malleys · #6 (**permalink**) 09.09.2019, 16:55

Сообщение от orange8031

нужно в цикле пройти по всем option в select взять их value там есть white, black и тд. есть список который копирует эти опции и добавляет li data-value=white, black и тд. Мне нужно проверить после клика что осталось в этом select и спрятать все li кроме data-value которые совпадают с option value

orange8031, приведите ваш HTML-код, с которым вы работаете в данном примере.

orange8031 · #7 (**permalink**) 09.09.2019, 17:04

<div class="value">
							<select id="#select"style="display: none;">
								<option value="">Выбрать опцию</option>
								<option value="white">Белый</option>
								<option value="black">Черный</option>
							</select>
							<div id="select-ul">
								<span class="current">Выбрать опцию</span>
								<ul class="list">
									<li data-value="" class="option selected">Выбрать опцию</li>
									<li data-value="white" class="option">Белый</li>
									<li data-value="black" class="option">Черный</li>
								</ul>
							</div>
						</div>

laimas · #8 (**permalink**) 09.09.2019, 17:23

Это действие $( "#select option" ).each(function( index ) было бы справедливо, если бы список был со множественным выбором, а вашем случае это просто $( "#select" ).val().

Дальше нужно просто взять li и отфильтровать, при этом и для этого цикла не нужно.

Malleys · #9 (**permalink**) 09.09.2019, 17:23

Я так понимаю, что вы хотите выбрать из вашего UL-списка пункт, чтобы остальные, кроме выбранного, скрылись, и выбранное значение записалось в SELECT-список.

<div class="value">
	<select id="#select" style="display: none;">
		<option value="">Выбрать опцию</option>
		<option value="white">Белый</option>
		<option value="black">Черный</option>
	</select>
	<div>
		<span class="current">Выбрать опцию</span>
		<ul class="list">
			<li data-value="" class="option selected">Выбрать опцию</li>
			<li data-value="white" class="option">Белый</li>
			<li data-value="black" class="option">Черный</li>
		</ul>
	</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$("li[data-value]").on("click", function() {
	$("li:not([data-value=" + $(this).data("value") + "])", this.parentNode).hide();
	$("select", $(this).closest(".value")).val($(this).data("value"));
});
	
</script>

orange8031, а вообще зачем вам SELECT, если он всё равно скрыт? Для формы достаточно input[type=hidden]

<div class="value">
	<input type="hidden">
	<div>
		<span class="current">Выбрать опцию</span>
		<ul class="list">
			<li data-value="" class="option selected">Выбрать опцию</li>
			<li data-value="white" class="option">Белый</li>
			<li data-value="black" class="option">Черный</li>
		</ul>
	</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$("li[data-value]").on("click", function() {
	$("li:not([data-value=" + $(this).data("value") + "])", this.parentNode).hide();
	$("input[type=hidden]", $(this).closest(".value")).val($(this).data("value"));
});
	
</script>

orange8031, не пиши <select id="#select" style="display: none;">, пиши <input type="hidden">

рони · #10 (**permalink**) 09.09.2019, 17:29

Malleys,

$("li:not([data-value=" + $(this).data("value") + "])", this.parentNode).hide();

как вариант

$(this).siblings().hide();

Форум

Справочник

Discord чат

Курсы javascript