Anwenden von Text aus dem ausgewählten Dropdownmenü auf das Eingabefeld (html, javascript)

Question

Wenn ich ein Element aus einer Dropdown-ID wähle, um es in einem Eingabefeld anzuzeigen, wenn ein anderes Element ausgewählt ist, möchte ich dieses zum Eingabefeld getrennt hinzufügen durch ein Komma.

Derzeit ist dies die html:

<div> 
    <input type="text" id="box" placeholder="Using..." style="width: 400px"> 
    <select style="width: 180px" id="drop"> 
     <option value="" disabled selected>Select</option> 
     {% for stuff in stuffs%} 
     <option value="{{stuff}}" onclick="ApplyField(drop,box)">{{stuff}}</option> 
     {% endfor %}     
    </select> 
</div> 

und die javascript:

<script> 
    function ApplyField(drop_id,box_id) 
    { 
    var e = document.getElementById(field_id); 
    var selectedItem = e.options[e.selectedIndex].text; 
    if (document.getElementById(box_id).text == "") 
     document.getElementById(box_id).text = selectedItem; 
    else 
     document.getElementById(box_id).text = document.getElementById(box_id).text + "," + selectedItem; 
    }  
</script> 

Aber irgendwie mein Skript wird nicht das Eingabefeld Element in die SelectedItem gesetzt altough der Code mir logisch erscheint. Das ist das erste Mal, dass ich Javascript schreibe, so dass ich wahrscheinlich etwas Triviales verpasst habe. Jede Hilfe ist erwünscht.

Answer 1

Ich glaube, dass Ihre Drop_id und Box_id sind nicht die richtige Methode, um das Element in JavaScript auswählen. Auch nicht ganz sicher, was mit der Vorlage {{stuff}} passiert, um ehrlich zu sein

Answer 2

Können Sie jQuery verwenden? Wenn ja, werfen Sie einen Blick auf http://www.w3schools.com/jquery/html_val.asp