Как отсортировать блоки при выборе select?

Question

[Павел]

Как реализовать сортировку при помощи select на jquery?
Песочница

Answer 1

[Rustam Azizov]

Для начала вынесите данные из HTML в JS. Идеальное решение — массив. Дальше с помощью JQuery заполняйте HTML контейнер данными из вашего массива данных. К селекту присобачьте событие изменения. В нём сортируйте массив с помощью Array.prototype.sort() и после сортировки обновляйте HTML.

Comments

[Павел]

можно пример на https://codepen.io/?

[Rustam Azizov]

Павел, 10 минут.

[Rustam Azizov]

Павел, сорян, отвлёкся. Вот:
https://codepen.io/Reenuay/pen/rNNrrbo

[Павел]

Rustam Azizov, Огромное спасибо!
А решение без выноса данных из HTML в JS есть или это невозможно реализовать?

[Rustam Azizov]

Павел, а зачем вам держать данные в HTML? Они у вас статические или вы всё же планируете получать их с сервера с помощью AJAX?

[Павел]

Rustam Azizov, с помощью php

[Rustam Azizov]

Павел, то есть вы генерируете HTML с помощью PHP?

[Павел]

Rustam Azizov, нет))) неправильно понял вопрос.
данные статические

[Rustam Azizov]

Павел, есть два варианта:
1) Отдаёте HTML и JS в браузер, оттуда JS запрашивает данные — PHP отдаёт (например в формате JSON) не важно из кода, из базы данных или из текстового файла
2) PHP запрашивает данные, опять же, не важно откуда, и отдаёт уже сгенерированный HTML со всеми данными. В этом случае сортировку надо делать на стороне сервера и на каждое изменение селекта отсылать новый запрос.

[Rustam Azizov]

Павел, то есть во втором случае надо будет каждый раз обновлять всю страницу.