Dynamic combobox javascript

Question

I am trying to make a combobox in javascript and populate it from an array. On selection I want to change a variable, call a function etc. I have looked at multiple tutorials on-line but for such an easy task the tutorials are dire.

Can anyone help? Cheers

DaveRandom · Accepted Answer · 2011-08-18 14:14:38Z

6

var i, theContainer, theSelect, theOptions, numOptions, anOption;
theOptions = ['option 1','option 2','option 3'];

// Create the container <div>
theContainer = document.createElement('div');
theContainer.id = 'my_new_div';

// Create the <select>
theSelect = document.createElement('select');

// Give the <select> some attributes
theSelect.name = 'name_of_select';
theSelect.id = 'id_of_select';
theSelect.className = 'class_of_select';

// Define something to do onChange
theSelect.onchange = function () {
    // Do whatever you want to do when the select changes
    alert('You selected option '+this.selectedIndex);
};

// Add some <option>s
numOptions = theOptions.length;
for (i = 0; i < numOptions; i++) {
    anOption = document.createElement('option');
    anOption.value = i;
    anOption.innerHTML = theOptions[i];
    theSelect.appendChild(anOption);
}

// Add the <div> to the DOM, then add the <select> to the <div>
document.getElementById('container_for_select_container').appendChild(theContainer);
theContainer.appendChild(theSelect);

edited Aug 18, 2011 at 14:14

answered Aug 18, 2011 at 12:42

DaveRandom

88.8k11 gold badges160 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

myol Over a year ago

Again thanks DaveRandom this is perfect. I just have one remaining question; I notice you have to have an element in the HTML page already defined (I used a div) to append the comboBox. Is there any way of dynamically making this element within the javascript?

DaveRandom Over a year ago

@r34ch you can make as much of an element hierarchy as you want, but you always have to have a parent element to add it to. I will update the answer so it creates a <div> to contain the <select>, but then what are you going to add the <div> to? You need to something statically defined on the page to get a reference to and call appendChild() on it.

myol Over a year ago

Also a minor correction for anyone else; alert('You selected option '+this.selectIndex); should read; alert('You selected option '+this.selectedIndex);

myol Over a year ago

Ahhh then my mistake, I did not know an element must be present in the HTML to append. I thought naively you could append to the body. Anyway your answer is working nicely, many thanks.

DaveRandom Over a year ago

You can do document.body.appendChild(); but surely your page must have some content already? And cheers for pointing out that error, I have fixed it above.

|

Collectives™ on Stack Overflow

Dynamic combobox javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related