Javascript 将文本字段添加到html下拉列表中

我有一个html下拉字段，其中应该在底部添加一个文本字段命名other。在该字段中键入的文本应为other:text

下拉式html是：

<select name="drop">
    <option selected="selected">Please select ...</option>
    <option value="car">car</option>
    <option value="bike">bike</option>
    <option value="Other">Other</option>
</select>

这里other应该是文本字段。为了理解，我保留other作为选项，但我希望它是一个输入文本字段，其中的值由用户给定

---

提前感谢

您可以在默认情况下为其他文本添加隐藏的输入字段：

<input type='text' id='other' name='other' style="display:none"/>

希望这有帮助

$'select'。在'change'上，函数{ 如果$this.val=='Other'{ $'other'.show.focus； }否则{ $'other'.val.hide； } } 请选择。。。 汽车 自行车 另外

---

您可以选择另一种方式，使文本字段可以访问所有选项，但在用户键入时提供自动完成选项。这可以通过jQuery自动完成插件等或新的html5数据列表来完成。这会将一组预先确定的选项绑定到文本字段-允许用户在输入值与该值匹配时从中进行选择，但也允许在没有匹配时输入替代文本。请注意，Safari和其他可能的浏览器还不支持此功能。但当它被支持时，它非常酷

 <input id="transportOptions" list="transport">

<datalist id="transport">
  <option value="Car">
  <option value="Bike">
  <option value="Scooter">
  <option value="Taxi">
  <option value="Bus">
</datalist> 

---

听起来你需要一个插件-这不是原生功能，也不可能使用香草html.am使用strip_tags$\u POST['other']来收集输入的其他值，但它只显示其他值，而不是输入的文本。你需要从id为div1的元素中获取值。请解释如何使用strip_tags$\u POST['other']要收集输入的其他值，但它只显示其他值，而不显示输入的文本，在添加名称后，如您在更新的答案中所看到的，您可以像其他人一样使用$\u POST['other']。然后它可能会变为另一个值。它位于drop下

<script type="text/javascript">
function showfield(name){
  if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
  else document.getElementById('div1').innerHTML='';
}
</script>

<select name="drop" id="drop" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>

 <input id="transportOptions" list="transport">

<datalist id="transport">
  <option value="Car">
  <option value="Bike">
  <option value="Scooter">
  <option value="Taxi">
  <option value="Bus">
</datalist>