SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Brooklyn, NY
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    var option=document.createElement("option");
    option.value="1";
    option.appendChild("hello");
    document.forms[0].shows.appendChild(option);
    here's the error I get:
    [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?

  2. #2
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Brooklyn, NY
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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)));

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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');
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Third Stone From The Sun
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setSelectOptions

    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
    }]);
    */
    My outdated site is down for a while now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •