HTML select options: setting the selected attribute to an input element has no effect
What I did is
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
select.appendChild(option);
select.appendChild(option);
// Set values and texts here.
option2.selected = true;
The last line of code above has no effect, I still get option1
as the selected option. What am I missing here?
javascript html
add a comment |
What I did is
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
select.appendChild(option);
select.appendChild(option);
// Set values and texts here.
option2.selected = true;
The last line of code above has no effect, I still get option1
as the selected option. What am I missing here?
javascript html
add a comment |
What I did is
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
select.appendChild(option);
select.appendChild(option);
// Set values and texts here.
option2.selected = true;
The last line of code above has no effect, I still get option1
as the selected option. What am I missing here?
javascript html
What I did is
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
select.appendChild(option);
select.appendChild(option);
// Set values and texts here.
option2.selected = true;
The last line of code above has no effect, I still get option1
as the selected option. What am I missing here?
javascript html
javascript html
asked Dec 30 '18 at 5:16
coderoddecoderodde
6872919
6872919
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
You need to append the select
to the body. It also helps to add some text to the option
s:
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
var option3 = document.createElement("option");
document.body.appendChild(select);
option1.innerText = 'One';
option2.innerText = 'Two';
option3.innerText = 'Three';
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
option2.selected = true;
I also added a third option to show that option2.selected = true
is respected
add a comment |
Add the value
& innerHTML
property to the select. And also fix the typo
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.value = "1";
option1.innerHTML = "1";
option2.value = "2";
option2.innerHTML = "2";
option2.selected = true;
select.appendChild(option1);
select.appendChild(option2);
document.getElementById('test').appendChild(select)
<div id='test'></div>
add a comment |
you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.
var myDiv = document.getElementById("myDiv");
//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
myDiv.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}
selectList[2].selected =1;
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%2f53975437%2fhtml-select-options-setting-the-selected-attribute-to-an-input-element-has-no-e%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to append the select
to the body. It also helps to add some text to the option
s:
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
var option3 = document.createElement("option");
document.body.appendChild(select);
option1.innerText = 'One';
option2.innerText = 'Two';
option3.innerText = 'Three';
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
option2.selected = true;
I also added a third option to show that option2.selected = true
is respected
add a comment |
You need to append the select
to the body. It also helps to add some text to the option
s:
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
var option3 = document.createElement("option");
document.body.appendChild(select);
option1.innerText = 'One';
option2.innerText = 'Two';
option3.innerText = 'Three';
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
option2.selected = true;
I also added a third option to show that option2.selected = true
is respected
add a comment |
You need to append the select
to the body. It also helps to add some text to the option
s:
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
var option3 = document.createElement("option");
document.body.appendChild(select);
option1.innerText = 'One';
option2.innerText = 'Two';
option3.innerText = 'Three';
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
option2.selected = true;
I also added a third option to show that option2.selected = true
is respected
You need to append the select
to the body. It also helps to add some text to the option
s:
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
var option3 = document.createElement("option");
document.body.appendChild(select);
option1.innerText = 'One';
option2.innerText = 'Two';
option3.innerText = 'Three';
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
option2.selected = true;
I also added a third option to show that option2.selected = true
is respected
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
var option3 = document.createElement("option");
document.body.appendChild(select);
option1.innerText = 'One';
option2.innerText = 'Two';
option3.innerText = 'Three';
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
option2.selected = true;
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
var option3 = document.createElement("option");
document.body.appendChild(select);
option1.innerText = 'One';
option2.innerText = 'Two';
option3.innerText = 'Three';
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
option2.selected = true;
answered Dec 30 '18 at 5:20
ic3b3rgic3b3rg
10.7k42045
10.7k42045
add a comment |
add a comment |
Add the value
& innerHTML
property to the select. And also fix the typo
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.value = "1";
option1.innerHTML = "1";
option2.value = "2";
option2.innerHTML = "2";
option2.selected = true;
select.appendChild(option1);
select.appendChild(option2);
document.getElementById('test').appendChild(select)
<div id='test'></div>
add a comment |
Add the value
& innerHTML
property to the select. And also fix the typo
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.value = "1";
option1.innerHTML = "1";
option2.value = "2";
option2.innerHTML = "2";
option2.selected = true;
select.appendChild(option1);
select.appendChild(option2);
document.getElementById('test').appendChild(select)
<div id='test'></div>
add a comment |
Add the value
& innerHTML
property to the select. And also fix the typo
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.value = "1";
option1.innerHTML = "1";
option2.value = "2";
option2.innerHTML = "2";
option2.selected = true;
select.appendChild(option1);
select.appendChild(option2);
document.getElementById('test').appendChild(select)
<div id='test'></div>
Add the value
& innerHTML
property to the select. And also fix the typo
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.value = "1";
option1.innerHTML = "1";
option2.value = "2";
option2.innerHTML = "2";
option2.selected = true;
select.appendChild(option1);
select.appendChild(option2);
document.getElementById('test').appendChild(select)
<div id='test'></div>
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.value = "1";
option1.innerHTML = "1";
option2.value = "2";
option2.innerHTML = "2";
option2.selected = true;
select.appendChild(option1);
select.appendChild(option2);
document.getElementById('test').appendChild(select)
<div id='test'></div>
var select = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.value = "1";
option1.innerHTML = "1";
option2.value = "2";
option2.innerHTML = "2";
option2.selected = true;
select.appendChild(option1);
select.appendChild(option2);
document.getElementById('test').appendChild(select)
<div id='test'></div>
answered Dec 30 '18 at 5:22
brkbrk
26.4k31940
26.4k31940
add a comment |
add a comment |
you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.
var myDiv = document.getElementById("myDiv");
//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
myDiv.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}
selectList[2].selected =1;
add a comment |
you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.
var myDiv = document.getElementById("myDiv");
//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
myDiv.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}
selectList[2].selected =1;
add a comment |
you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.
var myDiv = document.getElementById("myDiv");
//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
myDiv.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}
selectList[2].selected =1;
you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.
var myDiv = document.getElementById("myDiv");
//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
myDiv.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}
selectList[2].selected =1;
answered Dec 30 '18 at 5:44
Fatemeh Khosravi FarsaniFatemeh Khosravi Farsani
339
339
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%2f53975437%2fhtml-select-options-setting-the-selected-attribute-to-an-input-element-has-no-e%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