Set selectbox value using javascript

Question

Possible Duplicate:
JavaScript - populate drop down list with array

I have following select box,

<select name="supplier" id="supplier"><option></option></select>

I want to set the values of this select box using Javascript. The Javascript variable may be a String or an Array. That means if its a String then there will be only one option in select box. And if it is an array the select box should contain multiple options. Someone please help me find the solution. Thanks in advance....

I have tried

document.getElementById('supplier').value="Option 1";

but its not working

Do you want to set the options or the value? There is a difference. The value is the selected option(s). Also, were exactly are you stuck? — Felix Kling, Oct 19 '12 at 05:33
What have you tried? This looks like you are asking someone to do your work more than an issue with something not working. — Travis J, Oct 19 '12 at 05:35
I have edited my question, please undo the downvotes because my reputation is too low...And thanks for trying to help me. — Basim Sherif, Oct 19 '12 at 05:38

score 1 · Accepted Answer · edited Oct 19 '12 at 05:48

1

I would recommend to use jQuery, if you are doing a lot of DOM manipulation:

$("#supplier").append('<option value=1>My option</option>');

Without jQuery:

var select = document.getElementById("supplier");
select.options[select.options.length] = new Option('Text 1', 'Value1');

edited Oct 19 '12 at 05:48

Felix Kling

795,719
175
1,089
1,143

answered Oct 19 '12 at 05:35

Soojoo

2,146
1
30
56

@FelixKling thanks for editing.Now you can cancel the down vote.right? – Soojoo Oct 19 '12 at 05:51
I can only cancel my own down votes, not those of others... – Felix Kling Oct 19 '12 at 05:54

Ian · Answer 2 · 2012-10-19T05:42:52.013

Try this:

http://jsfiddle.net/f4yEt/

function addOptions(input) {
    var sel = document.getElementById("supplier");
    if (typeof input === "string") {
        input = [input];
    }
    sel.options.length = 0;
    for (var i = 0; i < input.length; i++) {
        sel.options[sel.options.length] = new Option(input[i], input[i]);
        // This APPENDS options
    }
}

The input parameter can be a string or array (technically it only checks for string, to turn it into an array for iterating), and then dynamically appends an option for each item in the array.

score 1 · Answer 3 · answered Oct 19 '12 at 05:35

To do this, you will need to create the nodes inside the .

var select = document.getElementById('supplier');
var option = document.createElement('option');
select.add(option);

Here is a larger tutorial that takes IE/FF differences into account: http://www.mredkj.com/tutorials/tutorial005.html

BUT

I would consider using jquery for this. Sujathan's answer has the jquery.

score 1 · Answer 4 · answered Oct 19 '12 at 06:20

1

jQuery method for arrays

var array = ["item 1", "item 2", "item 3"];
$.each(array, function(i, value) {
  $('#supplier').append($(document.createElement('option')).attr('value', i + 1).text(value));
});

http://jsfiddle.net/NN8KS/

answered Oct 19 '12 at 06:20

Michael Theriot

994
7
13

score 0 · Answer 5 · answered Oct 19 '12 at 05:53

//var varOpt = "test";
var varOpt = new Array('test1', 'test2', 'test3');
var sel = document.getElementById('supplier');

if( typeof varOpt === 'string' ){
   sel.add(new Option(varOpt , varOpt));
} else {
    for(key in varOpt) {
        sel.add(new Option(varOpt[key], varOpt[key]));
    }
}

Set selectbox value using javascript

5 Answers5