帶選項的HTML選擇表單輸入自定義值

我想要輸入字段，用戶可以輸入自定義文本值或從下拉列表中選擇，正常選擇僅提供下拉選項。帶選項的HTML選擇表單輸入自定義值

它如何接受例如ford的自定義值？

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select>

編輯：去掉死鏈接，解決方案是答案。

來源

2011-04-13 Ib33X

你可以使用JavaScript動態地添加一個選項來選擇，但再利用該信息將成爲一個真正的痛苦。 – David 2011-04-13 14:11:53

你可以做一點腳本！我在下面回答了！ – 2014-11-14 12:47:36

你不可能真的。您必須同時擁有下拉菜單和文本框，並讓他們選擇或填寫表單。沒有JavaScript，你可以創建一個單獨的單選按鈕集，他們選擇下拉或文本輸入，但這對我來說似乎很混亂。使用一些JavaScript，您可以切換禁用一個或另一個，具體取決於他們選擇哪一個，例如，在觸發文本字段的下拉列表中有一個「其他」選項。

來源

2011-04-13 14:06:28 Sam

根據你所描述的，我在下面的評論中有簡單的代碼！全部異步！ – 2014-05-23 13:17:52

選擇的答案應該更新爲Dmitry，低於 – Mark 2017-05-27 23:19:10

116

HTML5有一個內置的組合框。你創建一個文本input和一個datalist。然後，您將list屬性添加到input，其值爲datalist的id。

它看起來像這樣：

<input type="text" list="cars" /> 
 
<datalist id="cars"> 
 
    <option>Volvo</option> 
 
    <option>Saab</option> 
 
    <option>Mercedes</option> 
 
    <option>Audi</option> 
 
</datalist>

重要： 注意datalist不並不適用於所有瀏覽 R，實際上它支持is still very inmature as of 2018。不Safari支援在所有其他部分，除鉻以外的所有其他部分。

來源

2014-02-22 18:06:05 Dmitry

此功能僅支持約50％的瀏覽器。只有最新的firefox，chrome和opera支持這個; IE，Safari和移動瀏覽器不。請參閱[http://caniuse.com/]（http://caniuse.com/#feat=datalist） – markmarijnissen 2014-03-13 10:37:54

它在IE 10+中起作用。即使你給出的消息來源也這麼說。 – Dmitry 2014-03-19 08:46:53

即使在現在，它在Safari上也不起作用。 – chowey 2015-12-20 06:05:41

jQuery解決方案！

演示：http://jsfiddle.net/69wP6/2/

另一個演示下面

我需要的情況下，類似的，當我有一些固定的選擇，我想另外一個選擇是編輯（更新！）！在這種情況下，我做了一個隱藏的輸入，它將重疊選擇選項，並且是可編輯的，並且使用jQuery使其全部無縫工作。

我與大家分享小提琴！

HTML

<div id="billdesc"> 
    <select id="test"> 
     <option class="non" value="option1">Option1</option> 
     <option class="non" value="option2">Option2</option> 
     <option class="editable" value="other">Other</option> 
    </select> 
    <input class="editOption" style="display:none;"></input> 
</div>

CSS

body{ 
    background: blue; 
} 
#billdesc{ 
    padding-top: 50px; 
} 
#test{ 
    width: 100%; 
    height: 30px; 
} 
option { 
    height: 30px; 
    line-height: 30px; 
} 

.editOption{ 
    width: 90%; 
    height: 24px; 
    position: relative; 
    top: -30px 

}

jQuery的

var initialText = $('.editable').val(); 
$('.editOption').val(initialText); 

$('#test').change(function(){ 
var selected = $('option:selected', this).attr('class'); 
var optionText = $('.editable').text(); 

if(selected == "editable"){ 
    $('.editOption').show(); 


    $('.editOption').keyup(function(){ 
     var editText = $('.editOption').val(); 
     $('.editable').val(editText); 
     $('.editable').html(editText); 
    }); 

}else{ 
    $('.editOption').hide(); 
} 
});

編輯：增加了一些簡單的觸摸設計智慧，讓人們可以清楚地看到其中的輸入端！

JS小提琴：http://jsfiddle.net/69wP6/4/

來源

2014-05-23 13:15:51

阿倫Saqe最新的jsfiddle沒有切換爲我在Firefox上，所以我想我會提供一個簡單的HTML/JavaScript的解決方法，將形式（關於提交），直到有一天之內很好地發揮作用所有瀏覽器/設備都接受datalist標籤。有關更多詳細信息，請參閱：http://jsfiddle.net/6nq7w/4/注意：不要在切換兄弟之間留出空間！

<!DOCTYPE html> 
<html> 
<script> 
function toggleField(hideObj,showObj){ 
    hideObj.disabled=true;   
    hideObj.style.display='none'; 
    showObj.disabled=false; 
    showObj.style.display='inline'; 
    showObj.focus(); 
} 
</script> 
<body> 
<form name="BrowserSurvey" action="#"> 
Browser: <select name="browser" 
      onchange="if(this.options[this.selectedIndex].value=='customOption'){ 
       toggleField(this,this.nextSibling); 
       this.selectedIndex='0'; 
      }"> 
      <option></option> 
      <option value="customOption">[type a custom value]</option> 
      <option>Chrome</option> 
      <option>Firefox</option> 
      <option>Internet Explorer</option> 
      <option>Opera</option> 
      <option>Safari</option> 
     </select><input name="browser" style="display:none;" disabled="disabled" 
      onblur="if(this.value==''){toggleField(this,this.previousSibling);}"> 
<input type="submit" value="Submit"> 
</form> 
</body> 
</html>

來源

2014-05-28 03:23:39 mickmackusa

我想再次穿過那條小路！女巫版本的Firefox不支持那裏！我測試了一些我不記得的版本！獎勵！ – 2014-11-14 12:48:54

我不知道我在哪個版本的FF上。我只是看了一下FF34.0，現在我正在獲得功能，所以不用擔心。但是，默認的切換選項「其他」可以清除。當我通過編輯該值來刪除「其他」時，該dropmenu不提供直觀的值來選擇（以訪問編輯功能）。我認爲這歸結於個人偏好。由於當字段可編輯時，dropmenu箭頭仍然存在，用戶可能不會意識到該字段是可編輯的。不要嘲笑你;只是一些反饋。我的代碼段也考慮了

帶選項的HTML選擇表單輸入自定義值

回答

相關問題