SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2002
    Location
    Minneapolis, MN
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Updating options within a <select> via ajax

    I'm attempting to update a select box based upon a selection a user makes view another select box and have been scratching my head when it comes to making this work withing IIE.

    Using an ajax function I pulled from a blog that returns the contents of a link into a variable, I'm trying to populate my select box.

    I'm using the following code:

    Code:
    <html>
      <head>
        <title>XMLHTTP test</title>
        
    <script language="JavaScript" type="text/javascript">s
     function myTest(myString) {
     	//alert(myString);
     	document.getElementById('substatus').innerHTML = myString;
     }
    </script>
      </head>
      
      <body onLoad="makeHttpRequest('substatus.php?status=' +document.getElementById('status').value,myTest,false);">
    
        <select id="status" name="status" onChange="makeHttpRequest('substatus.php?status=' +document.getElementById('status').value,myTest,false);">
    <?=$statuses; ?>    
        </select>
    <br />
        <select id="substatus">
        </select>
    
        <script type="text/javascript" src="statusUpdate.js"></script>
    
        </body>
    </html>
    I know that calling innerHTML is my problem with IE however I don't know what the appropriate way to repopulate the select box is. Do I have to clear the select box and append each line one at a time or is there a generic way to replace all options like innerHTML? If so, how can I step line by line through my variable?

    Also, my substatus.php script returns <option> tags. For example:

    Code:
    <option value="1">My text 1</option>
    <option value="2">My text 2</option>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    That's a known issue.
    http://support.microsoft.com/kb/276228

    Try passing back some JSON with the value and text parameters of each object, and build the select options from that information instead.

    Bulletproof Ajax has a good example of how to handle JSON values.
    http://bulletproofajax.com/code/chap.../jsonsearch.js
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •