Creating a HTML DOM select element in Javascript and having an onchange event - Stack Overflow

admin管理员组

文章数量:1391960

I am creating HTML DOM elements using Javascript (yes, I know it's nasty).
I can get the select element created but I cannot add an onchange property.

Example:

var sel = document.createElement('select');
sel.id = 'someID';
sel.title = 'Some title';
sel.style.fontWeight = 'bold';
sel.size = 1;

Once I have added the options and have done a
document.getElementById('someOtherID').appendChild(sel);
I get my select element.

What I want to do is, at A above, add:
sel.onChange = 'someJavascriptFunction()';
but it doesn't like it.

Should I be thinking outside of the square? Which one?

I am creating HTML DOM elements using Javascript (yes, I know it's nasty).
I can get the select element created but I cannot add an onchange property.

Example:

var sel = document.createElement('select');
sel.id = 'someID';
sel.title = 'Some title';
sel.style.fontWeight = 'bold';
sel.size = 1;

Once I have added the options and have done a
document.getElementById('someOtherID').appendChild(sel);
I get my select element.

What I want to do is, at A above, add:
sel.onChange = 'someJavascriptFunction()';
but it doesn't like it.

Should I be thinking outside of the square? Which one?

• javascript
• html
• dom
• select
• onchange

Share Improve this question Follow edited Feb 24, 2013 at 3:42 António Almeida 10.1k88 gold badges6262 silver badges7171 bronze badges asked Feb 24, 2013 at 3:33 user2103677user2103677 3311 silver badge33 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

The event name should be lowercase, and you need to assign a function instead of a string.

sel.onchange = someJavascriptFunction;

If there's more work to do, you can assign an anonymous function.

              //  v----assign this function
sel.onchange = function() {
    // do some work
    someJavascriptFunction();  // invoke this function
};

You should be doing something like this:

sel.onChange = someJavascriptFunction;

(notice that there are no parens after someJavascriptFunction. This means you are attaching the function, not the invocation of the function.

If there's a chance you'll be binding multiple functions to that event, you will want to use this slightly more lengthy method.

if (sel.addEventListener) {
    sel.addEventListener('change', changeFunction, false);
} else if (sel.attachEvent) {
    sel.attachEvent('onchange', changeFunction);
} else {
    sel.onchange = changeFunction;
}

An easier way to do the whole thing is: somewhere already in your page:

<div id=someContainer></div>

then in your javascript do this:

document.getElementById('someContainer').innerHTML = "<select id=someId title='some title' size=1 style='font-weight: bold' onchange='someJavascriptFunction()' >";

or more slowly:

var html = "<select id=someId title='some title' size=1 style='font-weight: bold' onchange='someJavascriptFunction()' >";

var someContainer = document.getElementById('someContainer');

someContainer.innerHTML = html;

The document.getElementById() is so mon, you might have a library like jquery or prototype that does that more easily like $('someContainer'), or else define it for yourself (var $ = document.getElementById;).

innerHTML is a pseudo-variable on every dom element that returns, or sets, all the html INSIDE the element you do it on. You can pass it arbitrarily long HTML, the whole page I guess if you want. and you can write a crafty program to build the html text, they even have templating systems like hogan (google it).

本文标签： Creating a HTML DOM select element in Javascript and having an onchange eventStack Overflow