HTML select: how to set drop down text

Question

How do I set the text values of a HTML drop down list to a value/variable from a external text or .js file. ( The value that will be displayed in the drop down list )

for example:

 <select id="usernameDropDown">
 <option value="username1">name1</option>
 <option value="username2">name2</option>
 <option value="username3">name3</option>
 </select>

I'm trying to dynamically change the values as above "name1" and "name2" and so on to the values from a local .js file. Currently I have the values from the .js files written on the html page successfully with the following code segment:

<script src="jstest.js" type="text/javascript"></script>

<script Language='JavaScript'>
document.write(name1)
document.write(name2)
document.write(name3)

document.write(CSRUsername1)
document.write(CSRUsername2)
document.write(CSRUsername3)
</script>

currently the .js file is setup something like this:

var name1="Alpha" 
var name2="Bravo"
var name3="Charlie"
var name4="Delta"
var name5="Echo"

Is there any method to set this text value using values from a text file or .js file? If possible, I would like to keep the solution in html / java script only..

Answer 1

Here's how to load a drop down dynamically [Fiddle].

HTML

<select id="usernameDropDown">
    <option>Choose a user</option>
</select>

Javascript

    var select = document.getElementById("usernameDropDown");
    var unames = ["Alpha", "Bravo", "Charlie", "Delta", "Echo"];
    for (var i = 0; i < unames.length; i++) {
        var opt = unames[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }

Answer 2

You can try setting the innerText property of each of the option elements:

var s = document.getElementById('names');
s.children[0].innerText = name1;
s.children[1].innerText = name2;
s.children[2].innerText = name3;

See this Fiddle.

Note that here you would need to know which child is where (e.g. the first child of the select is name1, etc.).

An alternative way to pick the children is to set ID attributes for each option, and use document.selectElementById on each option element.

Answer 3

Creates the options from scratch and adds them to the drop down list. The label is the text and the value is the value.

var dropdown = document.getElementById('usernameDropDown');

// if dropdown exists
if(dropdown) {
    var usernames = [
        { label: 'name1', value: 'username1' },
        { label: 'name2', value: 'username2' },
        { label: 'name3', value: 'username3' }
    ];

    for(var i=0,l=usernames.length; i<l; i++) {
        var username = usernames[i];

        var option = document.createElement('option');
        option.setAttribute('value',username.value);

        var optionText = document.createTextNode(username.label);
        option.appendChild(optionText);

        dropdown.appendChild(option);
    }
}

Answer 4

My idea:

HTML:

<select id="usernameDropDown">
 <option value="username1">name1</option>
 <option value="username2">name2</option>
 <option value="username3">name3</option>
</select>

Javascript:

window.onload = init;

var names=["Alpha", "Bravo", "Charlie", "Delta", "Echo"];

function init(){
    var opts = document.getElementById("usernameDropDown").childNodes;

    for (var i=0, i<opts.length, i++){
        opts[i].innerHTML = names[i];
    }
}

The javascript sets the 'innerHTML' property to the name string taken from the array. Not as elegant as Dissident Rage's version but shorter :D

Answer 5

Here is a really quick jQuery method that you could use

UPDATED version: It updates your select dynamically from your array fiddle

Your HTML

<select id="usernameDropDown">
 <option value="username1">Username</option>
</select>

Your javascript

var name = ["Alpha","Bravo","Charlie","Delta","Echo"];

for(i=0;i<name.length;i++){
    $("#usernameDropDown").append("<option value='name" + i + "'>" + name[i] + "</option>");
}

Answer 6

$("#usernameDropDown option").each(function(){
   if($(this).html() == "name1")
   {
     $(this).html(name1)
   } 
   if($(this).html() == "name2")
   {
     $(this).html(name2)
   } 
   if($(this).html() == "name3")
   {
     $(this).html(name3)
   } 
});