Can't appendChild to select option

I'm trying to add options to a select box
the error I get occurs when I try to append "hello" to the option object


here's the code that I'm trying to execute:

Quote:

---

var option=document.createElement("option");
option.value="1";
option.appendChild("hello");
document.forms[0].shows.appendChild(option);

---

here's the error I get:

Quote:

---

[Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://192.168.1.101/admin/global.js :: showReturn :: line 29" data: no]
http://192.168.1.101/admin/global.js
Line 29

---

the code is copied with slight modifications from here: http://developer.apple.com/internet/...e/example.html

it breaks when encountering option.appendChild("hello"); - something is wrong with this line but for the love of God I can't figure out what it is.

any ideas on why this is happening?

Code:

---

 
<script type="text/javascript">

function addOption() {
var opt=document.createElement("option");
opt.value="1";
// opt.innerHTML = "hello";
// opt.text = "hello";  // this line is not working in İnternet Explorer.
var txt = document.createTextNode("hello");
opt.appendChild(txt);

document.forms[0].shows.appendChild(opt);
}
</script>
<button onclick="addOption()"> add option </button>
<form>
<select name="shows">
</select>
</form>

---

gotcha, so the difference was switching
option.appendChild("hello");
with
option.text="hello";

what I don't understand is why it works in the Apple source code, but it didn't work in mine - the code is practically identical

You can't just append a text string by itself, you have to create a text node first. This ought to work:

Code:

---

var option=document.createElement("option");
option.value="1";
option.appendChild(document.createTextNode("hello"));
document.forms[0].shows.appendChild(option);

---

I can't see appendChild('string') in that source code you linked to... maybe you're getting confused with the appendChild(content) line. The content variable that is passed to the function is actually passed like this:

Code:

---

appendToSelect(select, i,
            document.createTextNode(getElementTextNS("", "title", items[i], 0)));

---

Use the appropriate commands for adding parts of elements instead of trying to create them separately

Code:

---

var shows = document.forms[0].shows;
shows.options[shows.options.length] = new Option('text contents','value');

---

You can actually set the length on the select's options.

This will automatically create new options for you (or remove old ones if the new length is less).

Code:

---

function setSelectOptions(selectOpts, newOpts, startIdx) {
        if(!startIdx)
                startIdx = 0;
        selectOpts.length = newOpts.length + startIdx;
        for(var i = 0; i < newOpts.length; i++, startIdx++) {
                var option = selectOpts[startIdx];
                option.text = newOpts[i].text || newOpts[ i ].value;
                option.value = newOpts[i].value;
                // Set this defaultSelected for FireFox.
                option.defaultSelected = option.selected = newOpts[i].selected;
                option.disabled = newOpts[i].disabled;
    }
}

// Try it.
/*
setSelectOptions(
        mySelect.options
        ,[ {
                text : "i am new text"
                ,value : "newValueAttribute"
                ,disabled : false
}]);
*/

---