如何實現選擇/文字輸入組合

Question

目前，我有一個下拉列表（選擇）這樣的盒子：

<div class="fs-mobile-question"> 
    <label>Name:</label> 
    <div> 
     <select name="q1" class="form-control input-lg fs-task-input" style="width: 180px; display: inline;"> 
     {% for name in names %} 
      <option value="{{ name }}">{{ names }}</option> 
     {% endfor %} 
     </select> 
    </div> 
</div> 

我希望做的是有在下拉列表中選擇「其他」選項。當用戶選擇「其他」時，文本輸入字段顯示爲鍵入自定義名稱（默認情況下它將被隱藏）。如果選擇除「其他」之外的任何內容，則文本輸入字段將消失。

我明白我可以在這裏使用一些jQuery魔術，但是我問這個問題的原因是因爲我正在修改一個現有的應用程序，我想盡可能地做出一些改變，我正在尋找一些關於我如何可以做到這一點。因此，如果有一種方法，例如，我可以同時給文本輸入字段和選擇框設置相同的名稱並優先考慮POST數據如何讀取它（即，如果「其他」是使用文本字段選中） - 我一定會感興趣。

感謝

Answer 1

在HTML5中，你會得到建在不使用JavaScript的最接近的，是數據列表。

適應了這個例子，你的榜樣 - http://html5tutorial.info/html5-datalist.php：

<input id="q1" name="name" type="text" list="q1list" class="form-control input-lg fs-task-input" style="width: 180px; display: inline;"/> 
<datalist id="q1list"> 
     {% for name in names %} 
      <option value="{{ name }}"> 
     {% endfor %} 
</datalist>