Форум

warren buffet · #11 (**permalink**) 17.09.2016, 18:12

Сообщение от Shurik

селекты о свойствами, во второй селекты со значениями свойств.

Тебя и не понимают, потому что так не делается. Семантика управления выбором свойств через тучу селектов в чем заключается? Какие свойства можно объединить в этом селекте, какие в том, и почему их нельзя перечислить в единственном?

Допустим есть такие свойства

Оттенок
Светлота
Насыщенность

Нормально, объединить можно

В другом будет

Яркость
Контрастность
Цветность

Ок.

И что это дает? Юзер все равно не увидит сопоставления вроде

Оттенок - 12
Светлота - 186
Насыщенность - 45

Поскольку всегда будет видно только 1 свойство и только 1 значение в паре.

Короче, хочешь делать пары - парься. Техническая проблема в чем была?

Связь свойство - список значений реализовать?

Shurik · #12 (**permalink**) 18.09.2016, 11:00

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

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

Например, в левой колонке все селекты будут содержать Форма и Цвет. В зависимости от того, выбран Форма или Цвет, в левом селекте будет выбор Круглый, Квадрат и Прямоугольник или Красный, Зелёный и Синий. После выбора по нажатию на кнопку Сохранить данные заносятся в базу. При выборе определённого объекта можно увидеть, что он круглый красного цвета.

Вот как в этом примере http://programilla.com/blog/siteconstruction/231.html

Но у меня пар селектов может быть бесконечно много. Каждый имеет имя name = "characteristic[]" и name = "characteristic_value[]", т.к. при отправке формы в php это будут массивы. Я думал в js также, но видимо не так.

Как мне указать что при выборе свойства в левом селекте, данные выгружались в селект, который слева от него.

laimas · #13 (**permalink**) 18.09.2016, 11:56

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>

При отправке формы сервер получит массив, в котором ключи есть идентификаторы свойств из таблицы свойств, а значения, это идентификаторы их значений из таблицы значений. Серверу не сложно по ключу получить имя свойства, а по ключу и значению имя значения. Зачем куча списков?

warren buffet · #14 (**permalink**) 19.09.2016, 09:33

Сообщение от Shurik

В первой колонке, где селекты со свойствами, все селекты одинаковы.

Так не делают. Но ты делай, тебе можно.

Shurik · #15 (**permalink**) 19.09.2016, 10:44

Это круто, спасибо.

Есть один вопрос. Я так понял, что эта строка

if(this.length==2) $(this).remove();

сбрасывает выбор свойства, но почему 2?

laimas · #16 (**permalink**) 19.09.2016, 10:49

Эта строка не сбрасывает выбор свойства, эта строка удаляет список свойств из формы если в нем выбирается последняя опция. С первой опцией чисто информативной на этот момент список будет содержать 2 опции, так как при выборе свойства выбранная опция удаляется из списка свойств - i.remove().

PS. Можно и не удалять выбранные опции свойств, но при этом прежде чем запрашивать сервер нужно проверять был ли уже запрос по этой опции, то есть имеется ли список ее у клиента. И сам список свойств не удалять, просто не именовать его.

Shurik · #17 (**permalink**) 19.09.2016, 11:10

Сообщение от laimas

Эта строка не сбрасывает выбор свойства, эта строка удаляет список свойств из формы если в нем выбирается последняя опция. С первой опцией чисто информативной на этот момент список будет содержать 2 опции, так как при выборе свойства выбранная опция удаляется из списка свойств - i.remove().

PS. Можно и не удалять выбранные опции свойств, но при этом прежде чем запрашивать сервер нужно проверять был ли уже запрос по этой опции, то есть имеется ли список ее у клиента. И сам список свойств не удалять, просто не именовать его.

Понял, спасибо.

Amnesia · #18 (**permalink**) 19.09.2016, 13:24

Ребят, уже 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, чтобы скрипт автоматический отслеживал инкремент первого поля селекта, и подгружал второй селект необходимой формы..

warren buffet · #19 (**permalink**) 19.09.2016, 13:41

Amnesia, тебя просто судьба пригнала в тему изобретателей велосипедов в треугольными колесами.

Так тоже не делают. Процедура добавления товара в корзину состоит в добавлении пары id-qty в куки. А вывод делается уже из куков. Все элементарно.

warren buffet · #20 (**permalink**) 19.09.2016, 13:51

Как делают "Пары" селектов. Вообще элементарно.

<ul>
<li id="col">Цвет</li>
<li id="shp">Форма</li>
<li id="pat">Дизайн</li>
<li id="mat">Материал</li>
</ul>

Стилями каждый раздел оформляется красиво, на корень, на <ul> вешается листенер и вперде. Юзер жмет, скрипт находит цель, берет id, делает запрос на сервер, с сервера приходят опции, unordered список которых рендерится внутри цели.

Можно сразу все отрендерить, а с сервера получать лишь возможные варианты выбора данной опции в условиях предыдущего выбора и просто дизаблить то, что выбрать нельзя.

На огромном числе сайтов фильтры товарных характеристик устроены именно так, или в основе своей так, но Шурик не таков. Чтобы не маяться с хтмлем, он нахерачит 24 одинаковых селекта и будет мараковать как обмануть природу.

Форум

Справочник

Discord чат

Курсы javascript