2016-04-17 61 views
2

我需要做以下的事情: 使用的JavaScript,具有文本類型和選擇標籤(組合框)的HTML的輸入標籤,創建一個可編輯的組合框。我不知道如何使組合框可編輯。你能給我一些建議嗎?編輯組合框的Javascript和HTML

我創建這樣的組合框,但顯然是不可編輯:

<html> 
    <label>Your preferred programming language: </label> 
    <select id="combobox"> 
     <option value="">Select one...</option> 
     <option value="ActionScript">ActionScript</option> 
     <option value="AppleScript">AppleScript</option> 
    </select> 
</html> 

我應該在哪裏使用的輸入標籤?

+0

這是很好的做法,接受一個答案或要求獲得進一步的援助,如果沒有一個答案適合:) – deiga

回答

1

嘗試這樣:

<label>Your preferred programming language: </label> 
<input type="text" id="new_value"/> 
<select id="combobox"> 
    <option value="">Select one...</option> 
    <option value="ActionScript">ActionScript</option> 
    <option value="AppleScript">AppleScript</option> 
</select> 



$("#new_value").keyup(function (e) { 
    if (e.keyCode == 13) { // enter key 
     var value = $(e.currentTarget).val(); // store the value from the input tag 
     var option = $("<option/>");   // create a new option tag 
     option.val(value).text(value);   // set the value attribute as well as the content 
     $("#combobox").append(option);   // insert the new object to the dom 
    } 
}); 
5

HTML5包括datalist元件,它解決了這個問題! :)

<html> 
 
    <label>Your preferred programming language: </label> 
 
    <input type="text" list="combo-options" id="combobox"> 
 
    <datalist id="combo-options"> 
 
     <option value="ActionScript">ActionScript</option> 
 
     <option value="AppleScript">AppleScript</option> 
 
    </datalist> 
 
</html>