通过单击多选框中的项目添加到 HTML 文本字段答案

【问题标题】：Adding to a HTML text field by clicking items in a multiple select box通过单击多选框中的项目添加到 HTML 文本字段
【发布时间】：2013-09-13 14:23:19
【问题描述】：

我想知道当我单击 HTML 中的多选框中的一个项目时，它是否有可能进入另一个表单框？基本上，当我点击某个东西时，我希望该文本进入一个表单。我试过搜索，但似乎没有任何答案。

<form name="input" method="post" action="#">
Display Tag:<input type="text" name="taginput">
<input type="submit" value="Go">
<select name="tags" multiple>
    <option value="C#">C#</option>
    <option value="Java">Java</option>
    <option value="Javascript">Javascript</option>
    <option value="PHP">PHP</option>
    <option value="Android">Android</option>
    <option value="jQuery">jQuery</option>
    <option value="C++">C++</option>
    <option value="Python">Python</option>
    <option value="HTML">HTML</option>
    <option value="MySQL">MySQL</option>
</form>

举个例子，当我点击Java选项时，我希望Java进入名为taginput的输入框。如果我然后单击Python 选项，我想要Java Python。这可能吗？

【问题讨论】：

lab.artlung.com/dropdown
当您单击该选择框中的多个项目时，您是否希望所有项目都进入该文本字段？
@andi 是的，如果我点击 HTML 然后是 Java，我希望他们都进入该字段，并且能够自己输入。
您可以使用 jquery 执行此操作：只需检查所选项目：检查此 js fiddle：jsfiddle.net/eUDRV/85
@VincentCohen 这行得通，但我不希望它被替换，而是希望将它添加到前一个。

标签： javascript html forms html-select

【解决方案1】：

这将适用于 plain javascript：

var sel = document.getElementsByName ('tags')[0];
sel.onclick = function () {
    document.getElementsByName ('taginput')[0].value = this.value;
}

演示here

第二个版本避免重复：

var sel = document.getElementsByName('tags')[0];
var choosen = [];
sel.onclick = function () {
    var is_there = !!~choosen.indexOf(this.value);
    if(is_there){return false;};
    choosen.push(this.value);
    document.getElementsByName('taginput')[0].value += this.value + ' ';
}

演示here

【讨论】：

我怎样才能让它添加到标签而不是替换它们？例如，如果我单击 Java 然后是 HTML，我希望它添加它，使其看起来像“Java HTML”。
是的！就是这样！谢谢：D
如果您多次单击同一个选项，这会创建重复的内容。此外，如果选择了单个选项，那么它也会添加到文本框的当前值中，应该被替换。
@Sergio，这不起作用 - 我点击了 Java 和 JavaScript，但文本框显示“Java Java”。
@andi，你检查了 cmets 中的版本吗？这个：jsfiddle.net/wDJLW/1

【解决方案2】：

您可以这样做，它会找到选定的选项，创建一个文本数组，然后将其添加到文本输入中。

$("select[name=tags]").change(function() {
    var arrSelected = $(this).find("option:selected").map(function() {
        return $(this).text();
    }).get();

    $("input[name=taginput]").val(arrSelected);
});

演示：http://jsfiddle.net/SyAN6/

【讨论】：

它没有添加它们，我应该指定...但它有效，Sergio 和 VincentCohen 已经发布了工作示例。
我的意思是当我点击多个时，它应该添加我点击的另一个，所以字段中会有多个单词。

【解决方案3】：

你可以看到这个小提琴：

http://jsfiddle.net/ppSv4/

$('select option').on('click',function(){
    $('#texthere').val( $(this).attr('value') );
});

【讨论】：

是否可以添加另一个标签而不是每次都替换它们？
你可以这样做... $('#texthere').val( $('#texthere').val() + ' ' + $(this).attr('value ') );
但我认为这是一个坏主意：您应该在每次点击期间检查所选项目。因为，如果你删除项目......塞尔吉奥响应是一个更好的开始......

【解决方案4】：

您可以使用 jquery 执行此操作，只需检查多选框中的更改，然后将新更改的数据添加到输入字段。

jsFiddle也可以http://jsfiddle.net/eUDRV/85/

$("#values").change(function () {
    var selectedItem = $("#values option:selected");
    $("#txtRight").val( $("#txtRight").val() +  selectedItem.text());
});

【讨论】：