Adding To A Html Text Field By Clicking Items In A Multiple Select Box

I'm wondering if it is possible that when I click on an item in a multiple select box in HTML that it goes into another form box? Basically, when I click on something I want that t

Solution 1:

This will work, with plain javascript:

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

Demo here

A second version avoiding duplicates:

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

Demo here

Solution 2:

You can do this, it finds the selected options, creates an array of text, then adds it to the text input.

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

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

Demo: http://jsfiddle.net/SyAN6/

Solution 3:

You can see this fiddle :

http://jsfiddle.net/ppSv4/

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

Solution 4:

You can do this using jquery, simply by checking for a change in the multi select box and then adding the newly changed data to the input field.

You can also the jsFiddle http://jsfiddle.net/eUDRV/85/

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