Применить текст из выбранного элемента dropdownmenu в поле ввода (html, javascript)

Question

Когда я выбираю элемент из идентификатора dropdownmenu, как для его просмотра в поле ввода, если выбран другой элемент, я хочу добавить это в поле ввода, разделенное запятой.

В настоящее время это 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> 

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

Но как-то мой сценарий обыкновение установить элемент входной коробки к SelectedItem Altough код кажется мне логичным. Это мой первый раз, когда я писал javascript, поэтому, вероятно, я пропустил что-то тривиальное. Любая помощь может быть описана.

Answer 1

Я считаю, что ваши drop_id и box_id не являются правильным способом выбора элемента в JavaScript. Также не совсем уверен, что происходит с шаблоном {{stuff}}, если честно

Answer 2

Можете ли вы использовать jQuery? Если да, посмотрите на http://www.w3schools.com/jquery/html_val.asp