Создать таблицу вариантов, как shopify

Question

Здравствуйте, я использую библиотеку ввода тегов jQuery для создания вариантов вариантов, например shopify, например, у каждого продукта могут быть определенные параметры, такие как размер цвета ... У меня есть 3 поля ввода, и каждый вход содержит переменное количество тегов, которые пользователь вводит в интерфейсе, как я могу умножить количество тегов, которые у меня есть в первом входе (цвет), на количество тегов, которые у меня есть в вторая строка (размер)

Например Количество цветных меток X Количество размерных меток

Это пример:

это мой код jQuery:

$('.tagline').on('change', function(){
    for(i = 0; i < $('.tagline').length; i++){
        // multiplicate line 1 width the line 2
    }
});

Это мой HTML-код

<input type="text" class="form-control tagline tokenfield" value="">

Я хочу создать такую ​​таблицу:

Answer 1

Вам необходимо сообщить браузеру / JavaScript, какие параметры доступны. Для этого вы можете использовать атрибут data- *, т.е.

<input type='text' name='fred' data-colors='red,green,blue' data-size='x,s,m,l'>

Затем вы можете использовать JavaScript для получения элементов data- * и создания необходимых элементов. Поскольку я использовал запятую для разделения данных, вам понадобится получить значение из элементов, разделив его по выбранному управляющему символу, и затем получите необходимое количество необходимых параметров.