SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Grosse Pointe Farms, MI
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing innerHTML of a select box

    Ok, here's my code

    Code:
    	var innerString;
    	innerString = "<option value=\"C\">C</option>"
    	alert(innerString);
    	document.getElementById("DEFECT_5").innerHTML = innerString;
    	alert(document.getElementById("DEFECT_5").innerHTML);
    The first alert has the text:

    "<option value="C">C</option>"

    However, the second alert has:

    "C</option>"

    I also tried doing:

    Code:
    	var innerString;
    	innerString = "<option value=\\\"C\\\">C</option>"
    	alert(innerString);
    	document.getElementById("DEFECT_5").innerHTML = innerString;
    	alert(document.getElementById("DEFECT_5").innerHTML);
    The first alert gives:

    "<option value=\"C\">C</option>"

    but the second alert still gives:

    "C</option>"


    oh yeah if I do this:

    Code:
    	var innerString;
    	innerString = "/<option value=\"C\">C</option>"
    	alert(innerString);
    	document.getElementById("DEFECT_5").innerHTML = innerString;
    	alert(document.getElementById("DEFECT_5").innerHTML);
    Then the second alert comes out as:

    "/<option value="C">C</option>"


    Any ideas?

    Thanks,
    Ryan
    Michigan looks like your left hand . . . half way between your wrist and the base of your thumb is where I live.

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Might be better to just go with the DOM method...
    Code:
    var selObj = document.getElementById("DEFECT_5");
    var o = document.createObject("option");
    var text = document.createTextNode("C");
    o.setAttribute("value","C");
    selObj.appendChild(o);
    o.appendChild(text);
    you could go on to make this a function...
    Code:
    function addOption(selName,optVal,optText) {
    	var selObj = document.getElementById(selName);
    	var o = document.createObject("option");
    	var text = document.createTextNode(optText);
    	o.setAttribute("value",optVal);
    	selObj.appendChild(o);
    	o.appendChild(text);
    	}
    // Example call
    addOption('DEFECT_5','C','C');
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Grosse Pointe Farms, MI
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks,

    looks like this should work nicely

    -Ryan
    Michigan looks like your left hand . . . half way between your wrist and the base of your thumb is where I live.

  4. #4
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I've just found this post via the search, and when I try the function example addOption() by Beetle in FireFox 1.5.0.4, the javascript console shows the following error:

    Error: document.createObject is not a function
    Can anyone help?

    Here is my code:

    HTML Code:
    function addOption(selName,optVal,optText) {
    	var selObj = document.getElementById(selName);
    	var o = document.createObject("option");
    	var text = document.createTextNode(optText);
    	o.setAttribute("value",optVal);
    	selObj.appendChild(o);
    	o.appendChild(text);
    }
    
    function getDrivers(selectID, targetID){
    		http.open('get', 'ajax/list_drivers.php?account_number=' + document.getElementById(selectID).options[document.getElementById(selectID).options.selectedIndex].value);
    
    		http.onreadystatechange = function() {
    			switch(http.readyState) {
    				case 0: // Uninitialized
    				break;
    				
    				case 1: // Loading
    					//document.getElementById(targetID).innerHTML = '<option>Loading...</option>'; 
    				break;
    				
    				case 2: // Loaded
    				break;
    				
    				case 3: // Interactive
    				break;
    				
    				case 4: // Done!
    					var response = http.responseText;
    					if(response == '') {
    						document.getElementById(targetID).disabled = true;
    						document.getElementById(targetID).innerHTML = '<option>No Drivers Found...</option>'; 
    					} else {
    						addOption(targetID,'C','C');					
    					}
    				break;
    			}
    		}
    	http.send(null);
    }
    Thx in advance.
    Rich

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A thread revived from the dead!

    I honestly don't know whey I used document.createObject() back then, haha. The correct method is document.createElement()

    Reference: http://developer.mozilla.org/en/docs....createElement
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •