Set <select> value in Javascript

Question

I am trying to set the value of a <select> with javascript here is my code

var div = document.createElement("DIV");
var select = document.createElement("SELECT");

var option_mon = document.createElement("OPTION");
option_mon.value = "monday";
var monday = document.createTextNode("Monday");
var option_tue = document.createElement("OPTION");
option_tue.value = "tuesday";
var tuesday = document.createTextNode("Tuesday");

select.value = "tuesday";

option_mon.appendChild(monday);
option_tue.appendChild(tuesday);

select.appendChild(option_mon);
select.appendChild(option_tue);

div.appendChild(select);

But when I run this I dont see Tuesday as selected, Monday is selected as it is just the first value in the <select>, how can I set the value of the <select>

hi have you seen the answer ?

Keval Bhatt
– Keval Bhatt

2015-12-03 10:59:43 +00:00
Commented Dec 3, 2015 at 10:59 — Keval Bhatt
– Keval Bhatt, Commented Dec 3, 2015 at 10:59

Keval Bhatt · Accepted Answer · 2015-12-03 07:07:23Z

var div = document.createElement("DIV");
var select = document.createElement("SELECT");

var option_mon = document.createElement("OPTION");
option_mon.value = "monday";
var monday = document.createTextNode("Monday");
var option_tue = document.createElement("OPTION");
option_tue.value = "tuesday";
var tuesday = document.createTextNode("Tuesday");

select.value = "tuesday";

option_mon.appendChild(monday);
option_tue.appendChild(tuesday);

select.appendChild(option_mon);
select.appendChild(option_tue);
select.setAttribute('id', 'selectMe')

div.appendChild(select);
document.body.appendChild(select)
var e = document.getElementById("selectMe");
e.value = "tuesday";

function getvalue() {
    var e = document.getElementById("selectMe");

    var strUser = e.options[e.selectedIndex].value;
    document.getElementById("p").innerHTML = strUser;
}

function setvalue() {
    var e = document.getElementById("selectMe");
    e.value = "monday";
    getvalue()
}

<span id="p"></span><button onclick="setvalue()">set value</button><button  onclick="getvalue()">get value</button>

gurvinder372 · Accepted Answer · 2015-12-03 06:57:13Z

0

Try this (After your last statement, set the value in the select)

div.appendChild(select);
select.value = "tuesday";

answered Dec 3, 2015 at 6:57

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

void · Accepted Answer · 2015-12-03 06:57:28Z

0

Just do:

select.value = "tuesday";

After

select.appendChild(option_mon);
select.appendChild(option_tue);

As you should select the value after adding the options to the select.

edited Dec 3, 2015 at 6:57

answered Dec 3, 2015 at 6:54

void

36.7k10 gold badges71 silver badges111 bronze badges

2 Comments

Felix Kling Over a year ago

Isn't that what the op is doing?

void Over a year ago

Ohh. crap. forgot to mention this.

Felix Kling · Accepted Answer · 2015-12-03 06:57:37Z

0

You have to set select.value after you added the options. Otherwise there is no option to select from.

answered Dec 3, 2015 at 6:57

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

Paper · Accepted Answer · 2015-12-03 06:58:49Z

0

Try this:

var div = document.createElement("DIV");
var select = document.createElement("SELECT");

var option_mon = document.createElement("OPTION");
option_mon.value = "monday";
var monday = document.createTextNode("Monday");
var option_tue = document.createElement("OPTION");
option_tue.value = "tuesday";
option_tue.selected = "selected";
var tuesday = document.createTextNode("Tuesday");

option_mon.appendChild(monday);
option_tue.appendChild(tuesday);

select.appendChild(option_mon);
select.appendChild(option_tue);

div.appendChild(select);

Untested but should work.

The key is:

option_tue.selected = "selected";

Because that's what I would do in HTML, wouldn't you?

answered Dec 3, 2015 at 6:58

Paper

1,3142 gold badges19 silver badges32 bronze badges

Comments

ketan · Accepted Answer · 2015-12-03 07:04:19Z

0

Add select.value = "tuesday"; After option_tue.appendChild(tuesday); Make it Working.

Check you updated Working code:

var div = document.createElement("DIV");
var select = document.createElement("SELECT");

var option_mon = document.createElement("OPTION");
option_mon.value = "monday";
var monday = document.createTextNode("Monday");
var option_tue = document.createElement("OPTION");
option_tue.value = "tuesday";
var tuesday = document.createTextNode("Tuesday");


option_mon.appendChild(monday);
option_tue.appendChild(tuesday);

select.appendChild(option_mon);
select.appendChild(option_tue);

select.value = "tuesday";

div.appendChild(select);

document.getElementsByTagName('body')[0].appendChild(div);

Working Fiddle

edited Dec 3, 2015 at 7:04

answered Dec 3, 2015 at 6:59

ketan

19.4k42 gold badges68 silver badges107 bronze badges

Comments

Hiren Bhalani · Accepted Answer · 2015-12-03 07:09:37Z

0

Put select.value = "tuesday"; after appending option in select, then it should work.

answered Dec 3, 2015 at 7:09

Hiren Bhalani

8489 silver badges17 bronze badges

Collectives™ on Stack Overflow

Set <select> value in Javascript

7 Answers 7

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related