Цитата:
Допустим есть такие свойства Оттенок Светлота Насыщенность Нормально, объединить можно В другом будет Яркость Контрастность Цветность Ок. И что это дает? Юзер все равно не увидит сопоставления вроде Оттенок - 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, время: 01:34. |