将下拉框选择附加到文本框 [英] append dropdown box selections to a textbox

问题描述

我想知道是否有人可以为我寻找的东西指向正确的方向... 基本上，我想有3-5个下拉框(也许还有2个文本框)，每个框都有自己的特定选项.然后，我想在按下按钮(将其生成)后，将所选的选项追加(或用Excel称其为CONCATENATE)到文本框中的文本字符串中.我可以定义文本字符串以及选项所在的位置.

I am wondering if someone can point me in the right direction for what I am looking for... Basically, I would like to have 3-5 dropdown boxes (and maybe 2 textboxes) with each their own specific options. I would then like to append (or as excel would call it, CONCATENATE) the selected options into a string of text in a textbox after pressing a button (call it generate). I could define the string of text and where the options would reside.

粗暴的例子；

选择:

下拉菜单1-下拉菜单2-下拉菜单3-文本框1-文本框2

Dropdown 1 - Dropdown 2 - Dropdown 3 - Textbox 1 - Textbox 2

文本框中的输出:

选择1-选择2-选择3-可选文本-可选文本

Selection 1 - Selection 2 - Selection 3 - optional text - optional text

如果有人知道一个最适合我的需求的例子，那太棒了，因此我可以弄清楚……我还没有碰到一个例子.

If anyone knows of an example that would best suit my needs that would be awesome so I can sort of figure it out... I have yet to come across one.

推荐答案

要实现此目的，您将必须创建一个函数来收集所有值，然后以所需的方式对其进行格式化.

To achieve this, you would have to create a function that gathers all the values then formats them in the way you want.

例如:

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>

这篇关于将下拉框选择附加到文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！