将所选下拉菜单项中的文本应用于输入字段 (html,javascript)

Question

当我 select 下拉菜单 id 中的一个项目喜欢在输入字段中查看它时，如果另一个项目是 select 我想将其添加到输入字段中，用逗号分隔.

目前这是 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 尽管代码对我来说似乎合乎逻辑。这是我第一次写 javascript 所以很可能我错过了一些微不足道的东西。感谢任何帮助。

Answer 1

可以使用jQuery吗？如果是这样，请查看 http://www.w3schools.com/jquery/html_val.asp

Answer 2

我认为您的 drop_id 和 box_id 不是 select JavaScript 中元素的正确方法。老实说，也不太确定 {{stuff}} 模板发生了什么

将所选下拉菜单项中的文本应用于输入字段 (html,javascript)

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

html

javascript

jinja2

input-field

drop-down-menu