javascript — добавить выпадающий список в текстовое поле

Question

javascript — добавить выпадающий список в текстовое поле

Мне интересно, если кто-то может указать мне правильное направление для того, что я ищу …
По сути, я хотел бы иметь 3-5 раскрывающихся списков (и, может быть, 2 текстовых поля) с каждым из них своими конкретными параметрами. Затем я хотел бы добавить (или, как Excel назвал бы это, СОГЛАСОВАТЬ) выбранные параметры в строку текста в текстовом поле после нажатия кнопки (вызвать его генерировать). Я мог бы определить строку текста и где будут находиться параметры.

Грубый пример;

Выбор:

Раскрывающийся список 1 — Раскрывающийся список 2 — Раскрывающийся список 3 — Текстовое поле 1 — Текстовое поле 2

Вывод в текстовое поле:

Выбор 1 — Выбор 2 — Выбор 3 — необязательный текст — необязательный текст

Если кто-нибудь знает пример, который бы наилучшим образом соответствовал моим потребностям, это было бы потрясающе, так что я мог бы разобраться в этом … Я еще не сталкивался с таким.

-3

html javascript jquery jsfiddle php

Решение

По вопросам рекламы [email protected]

Accepted Answer

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

Примером этого может быть:

function generate(){
var result = '';

result += document.getElementById('drop1').value + ' - ';
result += document.getElementById('drop2').value + ' - ';
result += document.getElementById('drop3').value + ' - ';
result += document.getElementById('text1').value + ' - ';
result += document.getElementById('text2').value;

document.getElementById('output').innerHTML = result;
}
generate();

<select id="drop1" onchange="generate()">
<option value="d1s1">D1 S1</option>
<option value="d1s2">D1 S2</option>
</select>
<select id="drop2" onchange="generate()">
<option value="d2s1">D2 S1</option>
<option value="d2s2">D2 S2</option>
</select>
<select id="drop3" onchange="generate()">
<option value="d3s1">D3 S1</option>
<option value="d3s2">D3 S2</option>
</select>
<input id="text1" type="text" value="text1" onchange="generate()" onkeyup="generate()" />
<input id="text2" type="text" value="text2" onchange="generate()" onkeyup="generate()" />

<p id="output"></p>

2

Другие решения

Других решений пока нет …

Источник