Is it possible to make an editable dropdown menu using native JavaScript or jQuery?
I have a <select> element in HTML. I want users to be able to add options to the element.
I envision it working like this:
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option onclick='addNew()'>Click to add new option</option>
</select>
The last option on the list says "Click to add option". Whenever this is clicked, a function will transform the <select> element into something that allows free text entry.
Example of user experience:
Example of function:
function addNew() {
//Step 1, change select to allow free text entry
//Step 2, After text entry, change select back to regular select element and append the new option to the list
}//end addNew
My Question(s):
As you can see in my above code, the part that I am stuck with is the addNew function. I have searched the internet, but I can't seem to find a way to "change" the select element so as to allow free text entry and then append the value of the text to the select element as an option.
Is this even possible using native JavaScript or jQuery?
javascript jquery select dynamic edit
edited Nov 23 '18 at 3:41
Shiladitya
9,43692031
asked Nov 23 '18 at 1:57
PaulPaul
418
add a comment |
I have a <select> element in HTML. I want users to be able to add options to the element.
I envision it working like this:
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option onclick='addNew()'>Click to add new option</option>
</select>
The last option on the list says "Click to add option". Whenever this is clicked, a function will transform the <select> element into something that allows free text entry.
Example of user experience:
Example of function:
function addNew() {
//Step 1, change select to allow free text entry
//Step 2, After text entry, change select back to regular select element and append the new option to the list
}//end addNew
My Question(s):
As you can see in my above code, the part that I am stuck with is the addNew function. I have searched the internet, but I can't seem to find a way to "change" the select element so as to allow free text entry and then append the value of the text to the select element as an option.
Is this even possible using native JavaScript or jQuery?
javascript jquery select dynamic edit
edited Nov 23 '18 at 3:41
Shiladitya
9,43692031
asked Nov 23 '18 at 1:57
PaulPaul
418
1
Yes, this is possible but likely not in the fashion you wish. What do you do with the value of the option. They are generally different. In other words, you need two entries: 1) Option Name (shows in list) 2) Option Value does not show in list. This is best accomplished with two input elements outside the select, that provides the same result.
– Randy Casburn
Nov 23 '18 at 2:06
add a comment |
I have a <select> element in HTML. I want users to be able to add options to the element.
I envision it working like this:
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option onclick='addNew()'>Click to add new option</option>
</select>
The last option on the list says "Click to add option". Whenever this is clicked, a function will transform the <select> element into something that allows free text entry.
Example of user experience:
Example of function:
function addNew() {
//Step 1, change select to allow free text entry
//Step 2, After text entry, change select back to regular select element and append the new option to the list
}//end addNew
My Question(s):
As you can see in my above code, the part that I am stuck with is the addNew function. I have searched the internet, but I can't seem to find a way to "change" the select element so as to allow free text entry and then append the value of the text to the select element as an option.
Is this even possible using native JavaScript or jQuery?
javascript jquery select dynamic edit
edited Nov 23 '18 at 3:41
Shiladitya
9,43692031
asked Nov 23 '18 at 1:57
PaulPaul
418
I have a <select> element in HTML. I want users to be able to add options to the element.
I envision it working like this:
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option onclick='addNew()'>Click to add new option</option>
</select>
The last option on the list says "Click to add option". Whenever this is clicked, a function will transform the <select> element into something that allows free text entry.
Example of user experience:
Example of function:
function addNew() {
//Step 1, change select to allow free text entry
//Step 2, After text entry, change select back to regular select element and append the new option to the list
}//end addNew
My Question(s):
As you can see in my above code, the part that I am stuck with is the addNew function. I have searched the internet, but I can't seem to find a way to "change" the select element so as to allow free text entry and then append the value of the text to the select element as an option.
Is this even possible using native JavaScript or jQuery?
javascript jquery select dynamic edit
javascript jquery select dynamic edit
edited Nov 23 '18 at 3:41
Shiladitya
9,43692031
asked Nov 23 '18 at 1:57
PaulPaul
418
edited Nov 23 '18 at 3:41
Shiladitya
9,43692031
asked Nov 23 '18 at 1:57
PaulPaul
418
edited Nov 23 '18 at 3:41
Shiladitya
9,43692031
edited Nov 23 '18 at 3:41
Shiladitya
9,43692031
edited Nov 23 '18 at 3:41
Shiladitya
9,43692031
9,43692031
asked Nov 23 '18 at 1:57
PaulPaul
418
asked Nov 23 '18 at 1:57
PaulPaul
418
asked Nov 23 '18 at 1:57
PaulPaul
418
418
1
Yes, this is possible but likely not in the fashion you wish. What do you do with the value of the option. They are generally different. In other words, you need two entries: 1) Option Name (shows in list) 2) Option Value does not show in list. This is best accomplished with two input elements outside the select, that provides the same result.
– Randy Casburn
Nov 23 '18 at 2:06
add a comment |
1
Yes, this is possible but likely not in the fashion you wish. What do you do with the value of the option. They are generally different. In other words, you need two entries: 1) Option Name (shows in list) 2) Option Value does not show in list. This is best accomplished with two input elements outside the select, that provides the same result.
– Randy Casburn
Nov 23 '18 at 2:06
1
1
Yes, this is possible but likely not in the fashion you wish. What do you do with the value of the option. They are generally different. In other words, you need two entries: 1) Option Name (shows in list) 2) Option Value does not show in list. This is best accomplished with two input elements outside the select, that provides the same result.
– Randy Casburn
Nov 23 '18 at 2:06
Yes, this is possible but likely not in the fashion you wish. What do you do with the value of the option. They are generally different. In other words, you need two entries: 1) Option Name (shows in list) 2) Option Value does not show in list. This is best accomplished with two input elements outside the select, that provides the same result.
– Randy Casburn
Nov 23 '18 at 2:06
add a comment |
1 Answer
1
active
oldest
votes
Here you go with a solution
$('input, span').hide();
$('select').on('change', function(){
if($(this).val() === "addNew") {
$('input, span').show();
}
});
$('input').on('keypress', function(e){
if(e.keyCode === 13) {
var option = $("<option></option>");
option.text($(this).val());
option.val($(this).val());
$("select").append(option);
$('input').val('').hide();
$('span').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option value="addNew">Click to add new option</option>
</select>
<input type="text" placeholder="Add new option" />
<span>Please press enter to add option</span>On click of Click to add new option option, you will have a input textbox, post entering value to textbox please press enter to add new option to select.
Hope this will help you.
answered Nov 23 '18 at 3:38
ShiladityaShiladitya
9,43692031
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439817%2fis-it-possible-to-make-an-editable-dropdown-menu-using-native-javascript-or-jque%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here you go with a solution
$('input, span').hide();
$('select').on('change', function(){
if($(this).val() === "addNew") {
$('input, span').show();
}
});
$('input').on('keypress', function(e){
if(e.keyCode === 13) {
var option = $("<option></option>");
option.text($(this).val());
option.val($(this).val());
$("select").append(option);
$('input').val('').hide();
$('span').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option value="addNew">Click to add new option</option>
</select>
<input type="text" placeholder="Add new option" />
<span>Please press enter to add option</span>On click of Click to add new option option, you will have a input textbox, post entering value to textbox please press enter to add new option to select.
Hope this will help you.
answered Nov 23 '18 at 3:38
ShiladityaShiladitya
9,43692031
add a comment |
Here you go with a solution
$('input, span').hide();
$('select').on('change', function(){
if($(this).val() === "addNew") {
$('input, span').show();
}
});
$('input').on('keypress', function(e){
if(e.keyCode === 13) {
var option = $("<option></option>");
option.text($(this).val());
option.val($(this).val());
$("select").append(option);
$('input').val('').hide();
$('span').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option value="addNew">Click to add new option</option>
</select>
<input type="text" placeholder="Add new option" />
<span>Please press enter to add option</span>On click of Click to add new option option, you will have a input textbox, post entering value to textbox please press enter to add new option to select.
Hope this will help you.
answered Nov 23 '18 at 3:38
ShiladityaShiladitya
9,43692031
add a comment |
Here you go with a solution
$('input, span').hide();
$('select').on('change', function(){
if($(this).val() === "addNew") {
$('input, span').show();
}
});
$('input').on('keypress', function(e){
if(e.keyCode === 13) {
var option = $("<option></option>");
option.text($(this).val());
option.val($(this).val());
$("select").append(option);
$('input').val('').hide();
$('span').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option value="addNew">Click to add new option</option>
</select>
<input type="text" placeholder="Add new option" />
<span>Please press enter to add option</span>On click of Click to add new option option, you will have a input textbox, post entering value to textbox please press enter to add new option to select.
Hope this will help you.
answered Nov 23 '18 at 3:38
ShiladityaShiladitya
9,43692031
Here you go with a solution
$('input, span').hide();
$('select').on('change', function(){
if($(this).val() === "addNew") {
$('input, span').show();
}
});
$('input').on('keypress', function(e){
if(e.keyCode === 13) {
var option = $("<option></option>");
option.text($(this).val());
option.val($(this).val());
$("select").append(option);
$('input').val('').hide();
$('span').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option value="addNew">Click to add new option</option>
</select>
<input type="text" placeholder="Add new option" />
<span>Please press enter to add option</span>On click of Click to add new option option, you will have a input textbox, post entering value to textbox please press enter to add new option to select.
Hope this will help you.
$('input, span').hide();
$('select').on('change', function(){
if($(this).val() === "addNew") {
$('input, span').show();
}
});
$('input').on('keypress', function(e){
if(e.keyCode === 13) {
var option = $("<option></option>");
option.text($(this).val());
option.val($(this).val());
$("select").append(option);
$('input').val('').hide();
$('span').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option value="addNew">Click to add new option</option>
</select>
<input type="text" placeholder="Add new option" />
<span>Please press enter to add option</span>$('input, span').hide();
$('select').on('change', function(){
if($(this).val() === "addNew") {
$('input, span').show();
}
});
$('input').on('keypress', function(e){
if(e.keyCode === 13) {
var option = $("<option></option>");
option.text($(this).val());
option.val($(this).val());
$("select").append(option);
$('input').val('').hide();
$('span').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option value="addNew">Click to add new option</option>
</select>
<input type="text" placeholder="Add new option" />
<span>Please press enter to add option</span>answered Nov 23 '18 at 3:38
ShiladityaShiladitya
9,43692031
answered Nov 23 '18 at 3:38
ShiladityaShiladitya
9,43692031
answered Nov 23 '18 at 3:38
ShiladityaShiladitya
9,43692031
answered Nov 23 '18 at 3:38
ShiladityaShiladitya
9,43692031
9,43692031
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439817%2fis-it-possible-to-make-an-editable-dropdown-menu-using-native-javascript-or-jque%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Yes, this is possible but likely not in the fashion you wish. What do you do with the value of the option. They are generally different. In other words, you need two entries: 1) Option Name (shows in list) 2) Option Value does not show in list. This is best accomplished with two input elements outside the select, that provides the same result.
– Randy Casburn
Nov 23 '18 at 2:06