Работа с раскрывающимся списком

[laimas]

Зачем номер и для чего?

[ФедорН]

Зачем номер и для чего?

Напомню:
У меня получается так, что на странице клиент может добавить в калькулятор несколько позиций, далее открывает форму заказа и эти позиции, каждая в виде отдельной строки, добавляются в поле textarea.
Высота textarea ограничена, прокрутка не сильно удобна, при просмотре позиций (особенно если несколько одинаковых) легко сбиться. Я смотрел, как сделать поле textarea "резиновым" (скрипт впечатляющий). Также "примерял" div contenteditable, не впечатлил (и оформить корректно его мне не удалось). Поэтому я решил остановиться на том, чтобы просто пронумеровать строки, так по цифрам сбиться будет невозможно.

[laimas]

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

Вы разрешаете пользователю добавить но не заполняя отправить? Думаю нет, а следовательно все что выбрано будет по-порядку. Чем может помочь нумерация?

Если уж так охота пронумеровать в итоге, то есть в textarea, то методы $.map, $each и прочие, первым аргументом в функцию передают индекс элемента. Добавляйте к нему 1, получите нумерацию от 1 до ...

[ФедорН]

Если уж так охота пронумеровать в итоге, то есть в textarea, то методы $.map, $each и прочие, первым аргументом в функцию передают индекс элемента. Добавляйте к нему 1, получите нумерацию от 1 до ...

Спасибо! Оказалось, так просто.

[laimas]

Более полезным было бы удалять из набора не выбранные опции, а так как фактически это задается выбором в списке, то те, в которых нет выбора в нем. Делать это нужно по вызову формы

$('div.roword').filter(function() {
    return !$(this).find('select').val()
}).remove();

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

[ФедорН]

$('div.roword').filter(function() {
    return !$(this).find('select').val()
}).remove();

Благодарю. Согласен, полезная функция.
Я сначала ее в калькулятор запихал, естественно, первая строка при загрузке сразу удалялась потом уже в форму заказа добавил, все ок. но как понял, теоретически, если реализовать как-то через .onclick, то возможно было и в калькулятор добавить? (это сугубо для понимания. код не нужен).

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

Нет, нет, запоминать ничего не нужно.

Грубо на примере:


Заказали вы 10 Полей с исходным текстом, по высоте texarea весь список не отображается (максимум видно 2 позиции за раз), нужно пролистывать стрелками прокрутки. Пересчитать таким образом, что их 10, будет довольно проблематично, учитывая, что все они одинаковы.
А так они пронумерованы, вы сразу видите:
1. Поле с исходным текстом
...
10. Поле с исходным текстом

Это и всего лишь имелось в виду.

[laimas]

Я сначала ее в калькулятор запихал, естественно, первая строка при загрузке сразу удалялась

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

$('div.roword').not(':first').filter(function() {
           return !$(this).find('select').val()
        })
        .remove()
        .end()

Это коллекция, в которой все после первого набора заполнены. Заполнено ли все в первой неизвестно, требуется проверка.

[ФедорН]

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

Понял. Поправил. Все ок.

[laimas]

Все ок.

Как душе угодно, но учтите, первый при этом требует проверки. А можно ведь и не клонировать, а удалять все, при этом по умолчанию нет никаких полей.

Поле можно добавлять используя ранее заготовленный шаблон, который описан в переменной или хранится как данные в атрибуте кнопки Добавить:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
.myPrice {
    border: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    
    $('button').click(function() {
       $($(this).data('ins')).appendTo($('#form'))
                             .find('.myPrice').focus(function() {
                                    this.blur()
                             })
                             .end()
                             .find('a').click(function() {
                                    $(this).closest('.roword').remove()
                             })
    });
    
    //обработка изменения слайдера и выбора в списке
    $('#form').on('input change', 'select,input', function() {
        if(this.type == 'range') $(this).next().text(this.value)  //отобразить значение слайдера    
        //рассчет
        var o = $(this).closest('.roword').find('select,input'),
            v = o.eq(0).val(),
            w = o.eq(1).val(),
            h = o.eq(2).val(),
            r = o.last().val('');
            if(v) { 
                v = v * w * h;
                if(w * h <= 2399)  v *= 1.1
                else if(w * h >= 2400 && w * h <= 3999) v *= 1.055
                else if(w * h >= 4000 && w * h <= 5399) v *= 1.03;
                else if(w * h >= 5400 && w * h <= 6399) v *= 1.0135;
                r.val(v.toFixed())
            }
    });
    
    $('a').click(function() {
        $('div.roword').filter(function() {
            return !$(this).find('select').val()
        }).remove();
                
        var res = $.map($('div.roword'), function(e, i) {
                            return i+1 + '. ' + $.map($(e).find('select,input'), function(e) {
                                return e.value
                        }).join(', ');
                  }).join('\n');
        
        if(res) {
            $('textarea').val(res);
            $('button').prop('disabled', 0);
        }
    })

});
</script> 
</head>
<body>

<div id="form"></div>

<div class="clearfix"></div>
<button data-ins='<div class="roword"><div class="col-md-3 col-sm-6 col-xs-12 form-col-1"><select>
<option value="">Выберите цвет</option><option value="1.2">Зеленый</option><option value="1.6">Синий</option><option value="1.8">Красный</option></select>
</div><div class="col-md-3 col-sm-6 col-xs-12 form-col-2"><input type="range" min="40" max="300" value="40"><span>40</span></div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-3"><input type="range" min="40" max="200" value="40"><span>40</span></div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-4"><input class="myPrice" type="text" readonly> <a>Удалить</a></div></div>'>Добавить</button>

<div><textarea></textarea></div>
<a>Send</a>
</body>
</html>

[ФедорН]

laimas, прошу прощения, только сейчас увидел ваше последнее сообщение. Вы имели в виду, что первая строка требует проверки перед тем, как добавить следующую или же перед тем, как перейти к форме заказа?
Но что-то в коде не так: перестали работать калькулятор и кнопка "добавить", с первой же строки калькулятора появилась не кликабельная "удалить".
В html были несколько ошибок (видимо, образовались в процессе копирования): съехал <button data-ins=' и <div class="clearfix"></div>, и как понимаю, это лишний кусок: <div><textarea></textarea></div>
<a>Send</a>
Это я поправил. Но скрипт не могу.