Apply text from selected dropdownmenu item to input field (html,javascript)

Question

When i select an item from a dropdownmenu id like to view it in a input field, if another item is selected i want to add this to the input field separated by a comma.

Currently this is the 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>

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

But somehow my script wont set the input box item to the selecteditem altough the code seems logical to me. This is my first time writing javascript so its likely that i missed something trivial. Any help is appretiated.

Answer 1

I believe that your drop_id and box_id are not the correct way to select the element in JavaScript. Also not quite sure what is going on with the {{stuff}} template to be honest