Добавление в текстовое поле HTML, нажав элементы в поле множественного выбора

Question

Мне интересно, возможно ли, что когда я нажимаю на элемент в окне множественного выбора в 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, Это возможно?

Answer 1

Это будет работать с простым JavaScript:

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

Демо здесь

Вторая версия, избегающая дубликатов:

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 + ' ';
}

Демо здесь

Answer 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/

Answer 3

Вы можете сделать это с помощью jquery, просто проверив изменения в поле множественного выбора, а затем добавив вновь измененные данные в поле ввода.

Вы также можете jsFiddle http://jsfiddle.net/eUDRV/85/

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

Answer 4

Вы можете увидеть эту скрипку:

http://jsfiddle.net/ppSv4/

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