Сохранение значения select option при смене radio
Как сделать так, чтоб при смене radio, сохранялось то значение в select, которое было выбрано ранее. Например, если Ширина выбрана 150 у radio с "Нет", то при выборе radio с "1 сторона", выводило в select такую же Ширину 150.
И если выбран такой radio, у которого нет одинаковых значений с другим radio, то подбиралась похожее. Например, если Ширина выбрана 170 у radio с "Нет", то при выборе radio с "1 сторона", выводило Ширину 150.
<div class="print_bag">
<label>
<input class="radio_g" type="radio" name="field2" value="0">
<p>Нет</p>
</label>
<label>
<input class="radio_g" type="radio" name="field2" value="1">
<p>1 сторона</p>
</label>
</div>
<div class="fourth_param" title="Выберите размеры для изделия">
<div class="settings">
<label>
<h1>Высота, мм</h1>
<select id="param_0">
</select>
</label>
<label>
<h1>Ширина, мм</h1>
<select id="param_1">
</select>
</label>
<label>
<h1>Боковина, мм</h1>
<select id="param_2">
</select>
</label>
<label>
<h1>Дно, мм</h1>
<select id="param_3">
</select>
</label>
<label>
<h1>Длина ручки, мм</h1>
<select id="param_4">
</select>
</label>
<label>
<h1>Плотность, г/м2</h1>
<select id="param_5">
</select>
</label>
</div>
<hr>
</div>
jquery
let text = [
{
bag_print: "NONE",
bag_height: "NONE",
bag_width: "NONE",
bag_sidewall: "",
bag_bottom: "",
bag_hangle_length: "NONE",
bag_density: "NONE",
},
];
$('input[name="field2"]').on("click", function() {
text[0].bag_print = $(this).next("p").text();
text[0].bag_print = text[0].bag_print[0].replace(/\s+/g, " ").trim();
console.log(text[0].bag_print)
//БЕЗ ПЕЧАТИ
if (text[0].bag_print == "Н") {
height = [];
width = [];
bottom = [];
sidewall = [];
hangle_length = [];
density = [];
for (let i = 200; i <= 580; i += 10) {
height.push(i);
}
$("#param_0").empty();
$.each(height, function(key, value) {
$("#param_0").append($("<option></option>").attr("value", key).text(value));
});
for (let i = 100; i <= 800; i += 10) {
width.push(i);
}
$("#param_1").empty();
$.each(width, function(key, value) {
$("#param_1").append($("<option></option>").attr("value", key).text(value));
});
$("#param_3").empty();
$("#param_2").empty();
$("#param_4").empty();
for (let i = 40; i <= 120; i += 5) {
density.push(i);
}
$("#param_5").empty();
$.each(density, function(key, value) {
$("#param_5").append($("<option></option>").attr("value", key).text(value));
});
text[0].bag_height = $("#param_0 option:selected").text();
text[0].bag_width = $("#param_1 option:selected").text();
text[0].bag_sidewall = "";
text[0].bag_bottom = "";
text[0].bag_hangle_length = "";
text[0].bag_density = $("#param_5 option:selected").text();
}
//С ПЕЧАТЬЮ
else if (text[0].bag_print == "1") {
height = [];
width = [
100,
150,
200,
225,
250,
300,
350,
400,
450,
500,
550,
600,
700,
];
sidewall = [];
bottom = [];
hangle_length = [];
density = [];
for (let i = 200; i <= 580; i += 10) {
height.push(i);
}
$("#param_0").empty();
$.each(height, function(key, value) {
$("#param_0").append($("<option></option>").attr("value", key).text(value));
});
$("#param_1").empty();
$.each(width, function(key, value) {
$("#param_1").append($("<option></option>").attr("value", key).text(value));
});
$("#param_3").empty();
$("#param_2").empty();
$("#param_4").empty();
for (let i = 40; i <= 120; i += 5) {
density.push(i);
}
$("#param_5").empty();
$.each(density, function(key, value) {
$("#param_5").append($("<option></option>").attr("value", key).text(value));
});
text[0].bag_height = $("#param_0 option:selected").text();
text[0].bag_width = $("#param_1 option:selected").text();
text[0].bag_sidewall = "";
text[0].bag_bottom = "";
text[0].bag_hangle_length = "";
text[0].bag_density = $("#param_5 option:selected").text();
}
})
Чтоб нагляднее было https://jsfiddle.net/xgbqvp97/1/ |
Цитата:
|
laimas,
Это нанесение принта на товар. "Нет" - без нанесения, тогда значения Ширины от 100 до 800 с шагом 10. "1 сторона" - нанесение принта на 1 сторону товара - Ширина другая - 100, 150, 200, 225, 250, 300, 350, 400, 450, 500, 550, 600, 700. Как сделать так, чтоб выбранные значения параметров (высота, ширина и т.д.) в select, сохранялись при смене radio? А отдельно для значения Ширины, если до этого был выбран radio с "Нет", и в select для Ширины выбран, например 190 мм, то при выборе radio с "1 сторона", значение Ширины в select было 200 мм, то есть приближенное к прошлому значению? |
Когда мне дают задание, я требую ТЗ из которого я могу однозначно трактовать, связывать и т.д. данные, в общем понимать, что требуется сделать. У вас не так много их, но я прочитав так и не понял сути и что к чему. :)
|
laimas,
text[0].bag_print - берет текст у выбранного input type="radio" name="field2". Исходя из того, какой выбран input - создаются массивы для параметров (height, width и так далее), потом из значений этих массивов, для select создаются option. Пользователь выбирает нужный ему input("Нет", "1 сторона"), в "Высота, мм", "Ширина, мм", добавляется выбор (option). Пользователь выбирает нужную ему "Высота, мм", "Ширина, мм" (одно из значений option). Если пользователю нужен товар с теми же "Высота, мм", "Ширина, мм" при смене input, то ему приходится заново выбирать "Высота, мм", "Ширина, мм" . Как сделать вот это сохранение уже выбранного "Высота, мм", "Ширина, мм"? Надеюсь в этот раз попонятнее объяснил) |
Так почему у кнопок нет метки о том, что ими выбирают? Почему нет выбора по умолчанию? А почему остальные списки "мертвые"?
Если у вас заменяется код списков, то запомнить выбор можно только в переменных. Собственно "перелопачивать" списки и не обязательно, можно скрывать/показывать нужные из списков или нужную часть списка. PS. Если списки создаются по массивам данных, то определите для них сразу выбранные первые индексы опций, при создании списков отмечайте эти опции. При изменениях в списках заменяйте эти значения на значения выбранных опций. |
laimas,
Я не все сюда добавил, у меня несколько полей с кнопками и перед ними помечено, что ими выбирают) Выбора по умолчанию нет, так как значения параметров вот этих - "Высота, мм", "Ширина, мм" и т.д. появляются исходя из того, какие кнопки были выбраны до этого. "Мертвые" списки становятся "мертвыми", тоже смотря какие кнопки были выбраны, но да, лучше было бы их стереть для демонстрации) Сильно варьируются данные в этих списках у меня, поэтому подумал, что будет проще обновлять списки. Но теперь нужно вот это сохранение значения или подбор приближенного значения, к выбранному до этого. |
Цитата:
var a = 0, b = 0; //по умолчанию //создание списков "<option "+(array.index == a ? "selected" : "")+" value....><..." //изменение списка a = this.selectedIndex где array.index текущая итерация цикла. Свяжите переменные a и b, например с именами списков, обращаясь к ним как window[this.name], или как-то иначе свяжите, вот и будет запоминание. |
Или скорее нет, иначе бы заем иметь разные наборы списков - у списков значения разные? Тогда запоминать нужно не индексы, а значения. Но в таком случае что нужно запомнить, если выбранных значений нет в другом списке?
|
laimas,
В основном разные значения - первый список (например 20, 25, 50, 100), второй (110, 120, 130), но в некоторых списках есть приближенно одинаковые - третий список (80, 90, 100, 110), четвертый (80, 100, 120). Есть и одинаковые - пятый список (100, 200) и такой же шестой Думаю либо начать сначала список, без запоминания значения (если похожего нет - в первом например выбрано 25, то во втором выберет 110), либо подобрать как-то примерно похожее (в третьем выбрано 90, то во четвертом вместо 90 подбирает 100). И если одинаковые значения присутствуют (в пятом выбрано 100, то в шестом тоже 100) |
Вот это уж вам решать, выбирать ли за пользователя приближенное, считая, что он именно этого хочет, или не стоит.
|
laimas,
В моем случае, первый и второй список, относятся только к одному товару, который до этого был выбран, первый выбирается, если текст кнопки равен "Нет", второй список, если "1 сторона". Третий и четвертый списки, к другому товару, с такой же зависимостью от текста кнопок "Нет" и "1 сторона". Пятый и шестой - к третьему товару |
laimas,
и еще. К примеру
//создание первого списка
let width_1 = [];
//добавление последующих значений к списку
for (let i = 100; i <= 800; i += 10) {
width_1.push(i);
}
//второй список, с сохраненным выбранным значением из первого
//списка ($("#param_1 option:selected").text() - это из html при выборе нужного
//значения в option, оно присваивалось нулевому элементу массива width_2)
width_2 = [
$("#param_1 option:selected").text(),
100,
150,
225,
200,
250,
300,
350,
400,
450,
500,
550,
600,
700,
];
Теперь такой вопрос, уже задача проще. Как сделать проверку, если в первом списке (width_1) значение не входит во второй список (проверка начиная с первого элемента массива width_2), то как-нибудь выделить весь select второго списка или вывести ошибку? |
:) Когда я читаю подобное, меня терзают сомнения - все ли здесь так, как следовало бы, не лишнее ли здесь.
Что я могу сказать. Не знаю что за продуты, как выбираются и что отправляется серверу. Но предположим, что ваши "безымянные" радио кнопки как-то это определяют, то есть серверу нужны два списка. Они у вас и есть два, которым перезаписывается содержимое. А всего таких пар данных для этих списков может быть до восьмерки на боку. Даем первому списку имя "width", второму "height", под такими же именами определяем и две переменные со значением по умолчанию 0. Список заполняется опциями, это цикл, в цикле проверяется текущее значение со значением window[this.name], и если равно, опция выбирается. При выборе в списке значение его сохраняется в переменной - window[this.name] = this.value. А при сравнении, при построении списка уж как хотите, выбирайте ближайший или ... Ближайший или равный, это искать в массиве значение соответствующего списка до тех пор пока значение не будет больше window[select.name]. Берем предыдущий элемент и заканчиваем поиск - это будет либо равно window[select.name], либо ближайшее меньшее window[select.name] значение. Либо возвращаем 0, если ничего не найдено. Но это все прелюдии, а остальное, то что у вас, это нечто. Скажите, как это может быть, что параметры товаров, которых есть определяемые значения администратором в базе или на худой конец в переменных, и на сервере, явно прописывают циферки в js-коде? Сервер должен отдавать клиенту эти данные, с ними он должен работать, а никак не for (let i = 100; i <= 800; i += 10) ... и $("#param_1 option:selected").text(). Если это возможно, а у вас возможно, вы вообще не должны оперировать конкретными свойствами объекта данных для этих списков. Пусть ваши радио кнопки имеют значения 0 и 1. На сервере задаются параметры ширины и высоты для списков как диапазон с шагом. То есть, в базе прописано для значения 0: width => min = 100, max = 800, step = 10, height => min = 100, max = 600, step = 50, для значения 1 другие. Например, сервер, это РНР (на другом языке будет по другому, что не суть важно), по этим параметрам готовится массив данных, который будет описывать все данные для вашего кода, в частности для списков:
$data = [
0 => [
'width' => range($row->width->min, $row->width->max, $row->width->step),
'height' => range($row->height->min, $row->height->max, $row->height->step)
],
1 => [
'width' => range($row->width->min, $row->width->max, $row->width->step),
'height' => range($row->height->min, $row->height->max, $row->height->step)
]
];
Это будут массивы значений для списков полученные по указанным диапазонам с указанным шагом. Эти данные отдаются клиенту как JSON. Данные, с которыми будет работать клиентский сценарий в текущий момент, определяются значением выбранной кнопки. В общем с таким подходом. А если width_1, width_2, let i = 100; i <= 800; i += 10, то это уже караул, не вникая что это вообще такое, даже не понять что тут есть что, и ломать мозги этим нет никакого желания. ;) |
laimas,
Извините, что пришлось Вам хоть как-то в это вникать. Спасибо за помощь, я разобрался. :) |
Да вникать то не во что, сыр-бор какой-то. :) Не делают так, нельзя так, такой код сопровождать, это проще выбросить и писать новый.
|
laimas,
Если Вам интересно, что за сайт, могу скинуть в лс ссылку. Точно будете в шоке (от костылей и кривизны) |
Не буду, все не в штанишках рождаются. Но нужно сразу отходить от практики "все в куче".
|
| Часовой пояс GMT +3, время: 15:39. |