如何在HTML中創建可編輯的下拉列表？

Question

我想用下拉列表創建一個文本字段，讓用戶選擇一些預定義的值。用戶還應該能夠輸入新值或從下拉列表中選擇預定義的值。我知道我可以使用兩個小部件，但在我的應用程序中，如果它在一個小部件中統一，它將更符合人體工程學。

有沒有標準的部件或我必須使用第三方的JavaScript？

瀏覽器可移植性如何？

Answer 1

這樣做的最好方法可能是使用第三方庫。

在jQuery UI和dojo中有一個你正在尋找的實現。 jQuery更受歡迎，但dojo允許您聲明性地定義HTML中的窗口小部件，這聽起來更像您要查找的內容。

你使用哪一個將取決於你的風格，但都是爲跨瀏覽器工作而開發的，兩者都會比複製和粘貼代碼更新得更頻繁。

Answer 2

我不確定有沒有辦法自動做到沒有JavaScript。

你需要的東西是在瀏覽器端運行，當用戶做出選擇時將表單提交回服務器 - 因此，JavaScript。

此外，請確保您爲JavaScript關閉的用戶提供了替代方法（即提交按鈕）。

一個很好的例子：Combo-Box Viewer

我甚至更復雜的組合框昨天，這個dhtmlxCombo，使用Ajax檢索數據之間的大量相關的值。

Answer 3

<select>標籤只允許使用預定義的條目。解決您的問題的典型方法是將一個條目標記爲「其他」和禁用的編輯字段（<input type="text"）。僅當選擇「其他」時才添加一些JavaScript以啓用編輯字段。

它可能以某種方式創建允許直接編輯的下拉列表，但IMO不值得付出努力。如果是的話，亞馬遜，谷歌或微軟將這樣做;-)只需用最簡單的解決方案完成工作。它更快（你的老闆可能會喜歡這樣），而且通常更容易維護（你可能會喜歡這一點）。

Answer 4

不幸的是，一個組合框不在HTML規範中。

不幸的是，管理它的唯一方法就是推出自己的產品或使用預先建立的產品。 This one看起來很簡單。我使用this one作爲開源應用程序，但不幸的是您必須爲商業用途付費。

Answer 5

您可以使用HTML5中的<datalist>標記來完成此操作。

<input type="text" name="product" list="productName"/> 
<datalist id="productName"> 
    <option value="Pen">Pen</option> 
    <option value="Pencil">Pencil</option> 
    <option value="Paper">Paper</option> 
</datalist> 

如果雙擊瀏覽器中的輸入文本，將出現一個帶有定義選項的列表。

Answer 6

小CSS和你做 fiddle

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv"> 
<input name="filterTextField" type="text" id="filterTextField" tabindex="2" style="width: 140px; 
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" /> 
     <div style="position: absolute;" id="filterDropdownDiv"> 
<select name="filterDropDown" id="filterDropDown" tabindex="1000" 
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute; 
    top: 0px; left: 0px; z-index: 1; width: 165px;"> 
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option> 
</select> 

Answer 7

組合框與文本框（對於預先定義的值以及用戶定義的值。）

ComboBox with TextBox (Click Here)

Answer 8

基於CSS的非常簡單的實現（僅基本功能）和的JS代碼一行

<div class="dropdown"> 
    <input type="text" /> 
    <select onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()"> 
     <option>This is option 1</option> 
     <option>Option 2</option> 
    </select> 
</div> 

請注意：它使用previousElementSibling不受支持in older browsers (below IE9)

.dropdown { 
    position: relative; 
    width: 200px; 
} 
.dropdown select 
{ 
    width: 100%; 
} 
.dropdown > * { 
    box-sizing: border-box; 
    height: 1.5em; 
} 
.dropdown select { 
} 
.dropdown input { 
    position: absolute; 
    width: calc(100% - 20px); 
} 

這是在 JSFiddle

Answer 9

這可的幫助下實現純HTML，CSS和JQuery。我創建了一個示例頁面：

$(document).ready(function(){ 
 
    
 
    $(".editableBox").change(function(){   
 
     $(".timeTextBox").val($(".editableBox option:selected").html()); 
 
    }); 
 
});

.editableBox { 
 
    width: 75px; 
 
    height: 30px; 
 
} 
 

 
.timeTextBox { 
 
    width: 54px; 
 
    margin-left: -78px; 
 
    height: 25px; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <select class="editableBox">   
 
     <option value="1">01:00</option> 
 
     <option value="2">02:00</option> 
 
     <option value="3">03:00</option> 
 
     <option value="4">04:00</option> 
 
     <option value="5">05:00</option> 
 
     <option value="6">06:00</option> 
 
     <option value="7">07:00</option> 
 
     <option value="8">08:00</option> 
 
     <option value="9">09:00</option> 
 
     <option value="10">10:00</option> 
 
     <option value="11">11:00</option> 
 
     <option value="12">12:00</option> 
 
     <option value="13">13:00</option> 
 
     <option value="14">14:00</option> 
 
     <option value="15">15:00</option> 
 
     <option value="16">16:00</option> 
 
     <option value="17">17:00</option> 
 
     <option value="18">18:00</option> 
 
     <option value="19">19:00</option> 
 
     <option value="20">20:00</option> 
 
     <option value="21">21:00</option> 
 
     <option value="22">22:00</option> 
 
     <option value="23">23:00</option> 
 
     <option value="24">24:00</option> 
 
    </select> 
 
    <input class="timeTextBox" name="timebox" maxlength="5"/> 
 
</div>