I need to do the following thing: Using JavaScript, the HTML input tag having the text type and a select tag (bo box), create an editable bo box.
I have no idea how to make a bo box editable. Can you give me some suggestions, please?
I create the bo box like this, but is obviously not editable:
<html>
<label>Your preferred programming language: </label>
<select id="bobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
</select>
</html>
Where should I use the input tag?
I need to do the following thing: Using JavaScript, the HTML input tag having the text type and a select tag (bo box), create an editable bo box.
I have no idea how to make a bo box editable. Can you give me some suggestions, please?
I create the bo box like this, but is obviously not editable:
<html>
<label>Your preferred programming language: </label>
<select id="bobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
</select>
</html>
Where should I use the input tag?
Share Improve this question asked Apr 17, 2016 at 19:28 DianaMDianaM 2674 silver badges12 bronze badges 1- It's good practice to accept an answer or ask for futher assistance if none of the answers are suitable :) – deiga Commented Nov 9, 2017 at 11:36
3 Answers
Reset to default 10HTML5 includes the datalist element which solves this problem! :)
<html>
<label>Your preferred programming language: </label>
<input type="text" list="bo-options" id="bobox">
<datalist id="bo-options">
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
</datalist>
</html>Try something like this:
<label>Your preferred programming language: </label>
<input type="text" id="new_value"/>
<select id="bobox">
<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
$("#bobox").append(option); // insert the new object to the dom
}
});
<html>
<label>Your preferred programming language: </label>
<input type="text" list="bo-options" id="bobox">
<datalist id="bo-options">
<option value="1">ActionScript</option>
<option value="2">AppleScript</option>
</datalist>
</html>