Форум

javascript_pupil · #1 (**permalink**) 05.12.2022, 19:07

При загрузке в форму данных с сервера есть поля select и textarea. В этих полях есть данные. Т.е. у каждого option есть набор данных для textarea. Сразу загрузить эти данные в textarea не получается, т.к. на момент загрузки формы невозможно определить, что будет в selected option в поле select. При этом загрузить все возможные варианты option возможно.

Вопрос: как после загрузки всех данных в форму вставлять в textarea то, что соответствует selected option и менять при необходимости выбора другого элемента option данные в textarea?

Надеюсь, что всё понятно изложил, если нет - спрашивайте. Всем заранее спасибо за участие!

рони · #2 (**permalink**) 05.12.2022, 19:26

javascript_pupil,
непонятно в чём проблема?

voraa · #3 (**permalink**) 05.12.2022, 20:06

Что грузится то? Страница с сервера?

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

т.к. на момент загрузки формы невозможно определить, что будет в selected option в поле select.

Почему? Сервер, который готовит страницу этого не знает?

Ну а так, после загрузки страницы, определяете какая option selected, берете связанные с ней данные и переносите в textarea

javascript_pupil · #4 (**permalink**) 05.12.2022, 20:21

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

в чём проблема?

В недостаточных знаниях Javascript. Извините, если не оправдал ожиданий.

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

Сервер, который готовит страницу этого не знает?

Конечно знает. Но система построена таким образом, что когда данные загружаются в textarea, они не знают, что будет загружено в select.

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

определяете какая option selected, берете связанные с ней данные и переносите в textarea

В этом и есть мой вопрос. Анекдот помните про амерский авианосец и нашу подводную лодку?

Тут примерно то же самое.

Но я учусь...

рони · #5 (**permalink**) 05.12.2022, 20:54

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

javascript_pupil · #6 (**permalink**) 05.12.2022, 21:21

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

без конкретики, можно только гадать

Ну как-то так, наверное, сейчас это выглядит:

<select name="name">
<option value="one">
<option value="two" selected>
<option value="three">
</select>

<textarea name="results">
one
11111
two
22222
three
33333
</textarea>

а нужно, чтобы было так:

<textarea name="results">
22222
</textarea>

и при смене selected textarea получала бы значение "11111" или "33333".

рони · #7 (**permalink**) 05.12.2022, 23:05

javascript_pupil,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let select = document.querySelector("[name='name']"),
                textarea = document.querySelector("[name='results']"),
                obj = {
                    one: 11111,
                    two: 22222,
                    three: 33333
                };
            const load = () => textarea.value = obj[select.value];
            select.addEventListener("change", load);
            load();
        })
    </script>
</head>

<body>
    <select name="name">
<option value="one">one</option>
<option value="two" selected>two</option>
<option value="three">three</option>
</select>
    <textarea name="results">
one
11111
two
22222
three
33333
</textarea>
</body>

</html>

voraa · #8 (**permalink**) 06.12.2022, 10:05

Ну если с сервера приходит так заполненная textarea, то этот obj еще надо получить из textarea
Тогда код будет немного другой

<!DOCTYPE html>
<html>
 
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const select = document.querySelector("[name='name']");
            const textarea = document.querySelector("[name='results']");
            const strings = textarea.value.split('\n');
            const obj = {};
            for (let i = 0; i<strings.length; i+=2) {
				if (!strings[i]) continue;
				obj[strings[i]] = strings[i+1]
			}
				
            const load = () => textarea.value = obj[select.value];
            select.addEventListener("change", load);
            load();
        })
    </script>
</head>
 
<body>
    <select name="name">
<option value="one">one</option>
<option value="two" selected>two</option>
<option value="three">three</option>
</select>
    <textarea name="results">
one
11111
two
22222
three
33333
</textarea>
</body>
 
</html>

javascript_pupil · #9 (**permalink**) 06.12.2022, 11:23

рони, спасибо!

С сервера она должна приходить пустая, а заполнятся уже по мере выбора select option. В идеале, если select option только одна, данные сразу можно пускать в textarea, тем более, что select option в случае единственной записи сразу будет в положении selected.

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

obj = {

brands: "0
0",
chat: "28
50
38
84"
};

И если с переменными из одной строкой у меня всё работает, то конструкция выше, где у переменных есть переносы строк - нет. Попробовал "завернуть" в кавычки (как на примере), но тоже не помогает.

voraa, спасибо, Ваш вариант сейчас тоже буду пробовать. Дело в том, что данные для textarea я могу вытащить только когда обрабатывается именно поле textarea, программа в этот момент не знает что за данные ранее были внесены в select. И менять движок - не вариант, иначе я бы их сразу после получения значений select option грузил бы соответствующие данные в textarea. Но textarea "знает" какие option могут быть у select.

voraa · #10 (**permalink**) 06.12.2022, 12:15

Такого объекта, где строка разбита и продолжается на другую строку просто быть не может. По синтаксису js не пройдет с такими(") кавычками. Нужны другие (`).

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

Но textarea "знает" какие option могут быть у select.

Как она это знает? Куда записаны эти данные?

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

а в реальности они выглядят так:

Так они с сервера куда приходят? В textarea или в какой-то obj?

Ну проще ведь написать сразу, что нужно, а не выдавливать условия по капле.

Форум

Справочник

Discord чат

Курсы javascript