Помощь .filter
Добрый день! Ребята, подскажите пожалуйста как правильно запихнуть в .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();
});
});
|
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() + ']),'
}
может быть так, надо проверять. |
Не работает, прячет все.
|
<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() ? |
нужно в цикле пройти по всем option в select взять их value там есть white, black и тд. есть список который копирует эти опции и добавляет li data-value=white, black и тд. Мне нужно проверить после клика что осталось в этом select и спрятать все li кроме data-value которые совпадают с option value
|
Цитата:
|
<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> |
Это действие $( "#select option" ).each(function( index ) было бы справедливо, если бы список был со множественным выбором, а вашем случае это просто $( "#select" ).val().
Дальше нужно просто взять li и отфильтровать, при этом и для этого цикла не нужно. |
Я так понимаю, что вы хотите выбрать из вашего 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"> |
Malleys,
$("li:not([data-value=" + $(this).data("value") + "])", this.parentNode).hide();
как вариант $(this).siblings().hide(); |
| Часовой пояс GMT +3, время: 15:36. |