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 text to go into a form. I've tried searching, but nothing seems to have an answer.

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

To give an example, when I click on the Java option, I want Java to go into the input box called taginput. If I then click on the Python option, I want Java Python. Is this possible?

回答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){return false;};
    choosen.push(this.value);
    document.getElementsByName('taginput')[0].value += this.value + ' ';
}

Demo here

回答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/

回答3:

You can see this fiddle :

http://jsfiddle.net/ppSv4/

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

回答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());
});

来源：https://stackoverflow.com/questions/18788703/adding-to-a-html-text-field-by-clicking-items-in-a-multiple-select-box

标签

javascript

html

forms

html-select