html (dropdown) select option and javascript

Question

Possible Duplicate:
append option to select menu?
how do I add an option to a html form dropdown list with javascript

I have a html select element like below

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>

I would like to add another option value like below using javascript(not jQuery)

<option>Berry</option>

Can anyone say how could I do that ??

Thanks

score 3 · Accepted Answer · answered Nov 20 '12 at 05:21

3

First grab the select using document.getElementById

var sel = document.getElementById('mySelect');

Then add the option to the select's options collection like this

sel.options.add(new Option('text', 'val'));

Working example

answered Nov 20 '12 at 05:21

Adam Rackis

82,527
56
270
393

I am looking for a solution like you.But your's one is not working in my form.What could be problem ?? I saw your jsfiddle. – Php Php Nov 20 '12 at 06:06
is there any event handler required ?? – Php Php Nov 20 '12 at 06:08
@php - no event handler needed. Not sure what the problem is - just take a hard look at the fiddle and see if you can surmise what you did wrong. – Adam Rackis Nov 20 '12 at 06:13
it seems funny to me. I paste my code to your fiddle and it is working. But in my application it is not working. – Php Php Nov 20 '12 at 06:27
I am also trying like below ` Untitled Document

` but it is also not working. – Php Php Nov 20 '12 at 06:46
@php - Ahh - your script is running before your Dom is ready. Move your script block to the bottom of your page's body. – Adam Rackis Nov 20 '12 at 07:07
But I would like to use that before body. How can I do that ?? – Php Php Nov 20 '12 at 07:29
You just need to **define** the script at the end of your body. That's all. There's no reason you'd need to use the script before your body is defined - in fact that won't work, since the dom elements are not yet ready. Just put the script at the very very end of your body and everything should work right. – Adam Rackis Nov 20 '12 at 15:39

score 0 · Answer 2 · answered Nov 20 '12 at 05:22

//Declare some variables
var ctn = "Berry",
    opt = document.createElement("option");

//Set the text
opt.innerText = ctn;

//Put it in
document.getElementById('mySelect').appendChild(opt);

LIVE demo: http://jsfiddle.net/DerekL/BzZXn/

This can also apply to all HTML tags.

score 0 · Answer 3 · answered Nov 20 '12 at 05:26

0

var x=document.getElementById("mySelect");
var option=document.createElement("option");
option.text="Kiwi";
try{
  // for IE earlier than version 8
  x.add(option,x.options[null]);
}
catch (e){
  x.add(option,null);
}

answered Nov 20 '12 at 05:26

Pragnesh Chauhan

8,363
9
42
53

score 0 · Answer 4 · answered Nov 20 '12 at 05:27

    <script type="text/javascript">
function fnc()
{
document.getElementById("mySelect").options.add(new Option('berry'));
}
</script>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
<input type="button" onclick="fnc()" />
</form>

html (dropdown) select option and javascript

4 Answers4