Скрыть компонент, используя выбранную опцию в select2 - PullRequest
Новая
       10

Скрыть компонент, используя выбранную опцию в select2

3 голосов
/ 16 января 2020

Объясню, что я пытаюсь сделать;

Сначала , я делаю foreach объекта, подобного дому, который имеет свои свойства, например, size и numberFamiliars.

Хорошо, что size имеет умноженные значения, такие как 1,2,3 и 4. Но нет 1 дома, есть 30 домов, которые имеют 4 значения каждый в size свойство.

На другой стороне у меня есть dropdown select меню с Select2 jquery plugin.

. Я пытаюсь сделать, когда я выбираю одно свойство в dropdownSelect2 наподобие size = 4, все объекты, у которых нет этого свойства, должны иметь display: none. Как я могу связать одно с другим? Я имею в виду, что в select2 я могу взять id, а в foreach я могу сделать data-attribute, чтобы связать одно с другим, но я не знаю, как это сделать?

Я имею в виду присвоение идентификатора / имени этому элементу html и им и сделать что-то вроде: if(select2HousePropertiesSelected === house.hasthatValueinHisPropetie) { show } else { hide }.

Так вот, что я пытаюсь сделать: у меня есть это select: 

<select class="listboxServices select2-hidden-accessible" id="HotelAvailSideFilterResult_serviciosID" multiple="" name="HotelAvailSideFilterResult.serviciosID" tabindex="-1" aria-hidden="true">
<option value="abc">zyz</option>
<option value="cba">xyz</option>

and go on..
</select>

Теперь используйте этот идентификатор или этот класс, чтобы установить связь с выбранными элементами в элементе select Если в data-listServi cios и другой массив они добавляют некоторый css класс. Это то, что я хочу

Ответы [ 3 ]

1 голос
/ 16 января 2020

с тем, что вы нам дали, я составил эту скрипку

, что он делает (используя событие, которое вы сказали, что вы используете) итерирует по строкам таблицы, где * Атрибут 1005 * содержит код, а затем скрывает его. 

$(document).ready(function() 
{
    $('.listboxServices').select2()
        .on('select2:select', (e) =>
        {
            $(this).val().forEach(f=>
            {
                $('tr[data-listServices="'+f+'"]').hide();
            });

        });
});
1 голос
/ 16 января 2020

Я предполагаю, что вы хотите показать, что вы выбираете из поля выбора.

вы можете сделать это так 

function myFunction() {
  var x = document.getElementById("myDIV");
  var s = document.getElementById("select");
  var selectedValue = "You Selected: "+s.options[s.selectedIndex].value;
  x.innerHTML = selectedValue;
}
<!DOCTYPE html>
<html>
<body>

<select onchange="myFunction()" id="select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<div id='myDIV'> Select you Choice :-) </div>

</body>
</html>

Все, что вы выберете, появится там. Вы можете изменить с вашими потребностями с минимальными изменениями

0 голосов
/ 17 января 2020

Хорошо, я объясню, что я сделал, но сначала @Qpirate сделал это отлично, я просто немного изменил этот код, чтобы он выглядел так: 

$('#HotelAvailSideFilterResult_serviciosID').on('select2:select', function (e) {
            var data = e.params.data;
            console.log(data);

            $('tr[data-listServices*="' + data.id + '"]').hide();

        });
$('#HotelAvailSideFilterResult_serviciosID').on('select2: unselect', function (e) {
            var id = ',' + e.params.data.id + ',';
            console.log(id);

            $('tr[data-listServices*=",'+ id+',"]').show();

        });

Это означает, когда скрывать, а когда показывать , Позже я опубликую свое собственное решение, которое немного грязное, но это начало. Как я это сделал ....:

еще не опубликовано

Но в качестве резюме это позволяет вам фильтровать данные из двух разных элементов в html, используя атрибуты данных, используя также select2 как dropdownSelectList. Я отправлю свой ответ, вероятно, завтра

...