Цитата:
Допустим есть такие свойства Оттенок Светлота Насыщенность Нормально, объединить можно В другом будет Яркость Контрастность Цветность Ок. И что это дает? Юзер все равно не увидит сопоставления вроде Оттенок - 12 Светлота - 186 Насыщенность - 45 Поскольку всегда будет видно только 1 свойство и только 1 значение в паре. Короче, хочешь делать пары - парься. Техническая проблема в чем была? Связь свойство - список значений реализовать? |
В первой колонке, где селекты со свойствами, все селекты одинаковы. В зависимости от выбора свойства в правой колонке, где селекты со значениями свойств, будут подгружаться связанные значения свойств.
По умолчанию выводится один селект со свойствами и рядом пустой селект со значениями. Есть кнопка, которой можно добавить неограниченное кол-во таких пар селектов. Например, в левой колонке все селекты будут содержать Форма и Цвет. В зависимости от того, выбран Форма или Цвет, в левом селекте будет выбор Круглый, Квадрат и Прямоугольник или Красный, Зелёный и Синий. После выбора по нажатию на кнопку Сохранить данные заносятся в базу. При выборе определённого объекта можно увидеть, что он круглый красного цвета. Вот как в этом примере http://programilla.com/blog/siteconstruction/231.html Но у меня пар селектов может быть бесконечно много. Каждый имеет имя name = "characteristic[]" и name = "characteristic_value[]", т.к. при отправке формы в php это будут массивы. Я думал в js также, но видимо не так. Как мне указать что при выборе свойства в левом селекте, данные выгружались в селект, который слева от него. |
Shurik,
если в базе есть свойства с возможностью их добавления/редактирования, то обычно это отдельная таблица, а значения этих свойств, это таблица связанная по первичному ключу таблицы свойств. Если нужно выбрать значения этих свойств, то серверу в конечном итоге необходимо получить только результат выбора значений, самого списка свойств, а тем более кучи их дубликатов (по числу выбранных значений) совсем не требуется. И так, пусть есть свойства в базе под ID 11, 22, 33, 44, и связанными с ними по этому ключу значениями. В примере это описано объектом. Выбор каждого свойства строит список связанный в имени его по ключу выбранного свойства. Список свойств вообще не имеет имени, ибо серверу он не нужен, и при каждом выборе свойства выбранная опция удаляется из списка свойств. Она ведь уже не нужна, список ее значений уже сформирован у клиента. А если выбраны все свойства в списке, то его можно вообще удалить из формы. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> var lst = { '11' : {'111' : 'Aa', '112' : 'Ab', '113' : 'Ac'}, '22' : {'221' : 'Ba', '222' : 'Bb', '223' : 'Bc'}, '33' : {'331' : 'Ca', '332' : 'Cb', '333' : 'Cc'}, '44' : {'441' : 'Da', '442' : 'Db', '443' : 'Dc'} }; $(function() { $('#chc').change(function() { if(this.length==2) $(this).remove(); if(this.value) { var i = $(this).find(':selected'); $('#opt').append( '<label>Своство '+i.text()+ '</label><select name="opt['+this.value+']"><option value="">Выберите значение...</option>' + $.map(lst[this.value], function(v, k) { return '<option value="' + k + '">' + v + '</option>' }).join() + '</select>'); i.remove() } }) }); </script> </head> <body> <select id="chc"> <option value="">Выберите свойство...</option> <option value="11">A</option> <option value="22">B</option> <option value="33">C</option> <option value="44">D</option> </select> <div id="opt"></div> </body> </html> При отправке формы сервер получит массив, в котором ключи есть идентификаторы свойств из таблицы свойств, а значения, это идентификаторы их значений из таблицы значений. Серверу не сложно по ключу получить имя свойства, а по ключу и значению имя значения. Зачем куча списков? |
Цитата:
|
Это круто, спасибо.
Есть один вопрос. Я так понял, что эта строка if(this.length==2) $(this).remove(); сбрасывает выбор свойства, но почему 2? |
Эта строка не сбрасывает выбор свойства, эта строка удаляет список свойств из формы если в нем выбирается последняя опция. С первой опцией чисто информативной на этот момент список будет содержать 2 опции, так как при выборе свойства выбранная опция удаляется из списка свойств - i.remove().
PS. Можно и не удалять выбранные опции свойств, но при этом прежде чем запрашивать сервер нужно проверять был ли уже запрос по этой опции, то есть имеется ли список ее у клиента. И сам список свойств не удалять, просто не именовать его. |
Цитата:
|
Ребят, уже 3 день пытаюсь реализовать идею и она очень схожа с названием темы. В краце ситуация следующая:
Пишу на Python с фреймворком Django сайт- тестовый. И столкнулся с такой проблемой. Есть страница с таблицей(5 полей). В нее по форме можно добавлять значение на этой же странице. С помощью Jquery и Java Script, сделал автодобавление форм(чтобы добавить допустим сразу 6 значений за раз). Это все отрабатывает и формы появляются по кнопке "Добавить поле". Теперь задача связать в каждой форме первое поле селект с зависимым вторым c Id=Title. Грубо говоря первое поле Марка, а второе поле Модели(они подгружаются из базы жава скриптом). На данный момент проблема в том, что при добавлении форм, все поля ее добавляются автоматический с id="id_form-0-buy_tabako_brand" name="form-0-buy_tabako_brand", естественно они инкременты. Как мне написать Java-script, который будет следить за точным названием ид, и при его изменении(Смена Марки), подгрузить в нужную зависимую форму все Модели.. Сейчас это работает только с первой формой, а остальные формы, подгружаются лишь по Марке первой формы. Код: <div class="item row"> <div class="large-2 columns"> <label>Бренд</label> <select id="id_form-0-buy_tabako_brand" name="form-0-buy_tabako_brand"> <option value="" selected="selected">---------</option> <option value="1">Alfakher</option> <option value="2">Habibi</option> </select> </div> <div class="large-2 columns"> <label>Тип</label> <select id="title"> <option value="" selected="selected">---------</option> </select> </div> </div> <div class="item row"> <div class="large-2 columns"> <label>Бренд</label> <select id="id_form-1-buy_tabako_brand" name="form-1-buy_tabako_brand"> <option value="" selected="selected">---------</option> <option value="1">Alfakher</option> <option value="2">Habibi</option> </select> </div> <div class="large-2 columns"> <label>Тип</label> <select id="title"> <option value="" selected="selected">---------</option> </select> </div> </div> Сейчас есть вот такой код, который отслеживает состояние: $(document).ready(function() { $("#id_form-0-buy_tabako_brand").on('change', function title() { var id = $(this).val(); $.ajax({ data: {'id': id}, url: '/tabako/add_cart/brand/', type: 'get', success: function (data) { var html = "" for (var i = 0; i < data.length; i++) { html += '<option value="'+i+'">' + data[i].fields.tabako_titles_title + '</option>' } $('#title').html(html); } }); }); }) И проблема здесь, как указать id_form-0-buy_tabako_brand, чтобы скрипт автоматический отслеживал инкремент первого поля селекта, и подгружал второй селект необходимой формы.. |
Amnesia, тебя просто судьба пригнала в тему изобретателей велосипедов в треугольными колесами.
Так тоже не делают. Процедура добавления товара в корзину состоит в добавлении пары id-qty в куки. А вывод делается уже из куков. Все элементарно. |
Как делают "Пары" селектов. Вообще элементарно.
<ul> <li id="col">Цвет</li> <li id="shp">Форма</li> <li id="pat">Дизайн</li> <li id="mat">Материал</li> </ul> Стилями каждый раздел оформляется красиво, на корень, на <ul> вешается листенер и вперде. Юзер жмет, скрипт находит цель, берет id, делает запрос на сервер, с сервера приходят опции, unordered список которых рендерится внутри цели. Можно сразу все отрендерить, а с сервера получать лишь возможные варианты выбора данной опции в условиях предыдущего выбора и просто дизаблить то, что выбрать нельзя. На огромном числе сайтов фильтры товарных характеристик устроены именно так, или в основе своей так, но Шурик не таков. Чтобы не маяться с хтмлем, он нахерачит 24 одинаковых селекта и будет мараковать как обмануть природу. |
Часовой пояс GMT +3, время: 19:57. |