SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE 6 and below: Adding select element using createElement

    hi all,

    Whilst working on a project, I've encountered a bug that i'd like to clean up.

    In IE6 and below, when using createElement and appendChild to add a new select element to the page, it automatically selects the first option.

    the page relies on using the onchange event of the select element, and if there is only one option and it is selected, there is no possible way to fire the onchange event.

    To get around this, i've had to use innerHTML to build the select element, which I feel is dirty so I want to clean it up.

    Any idea's? I have already tried setting each option's selected value to false, etc but nothing other than using innerHTML seems to of worked,.

    Thanks,

    Gav


  2. #2
    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)
    The only idea I can think of is the order in which you do things. So if you append the select element to the page first and then append the option elements to the select element, maybe it'll work as opposed to appending the options to the select element and then appending the select to the page. Otherwise try it the other way round.

    I'm not sure what you mean by "selecting the first option". Do you mean it gives focus to the first option? If so maybe just blur() it after creation. Also, if there is only one option, obviously it can't be changed. Perhaps the first option should be "Select an option below", then IE selecting that one by default isn't a problem.

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I forgot to add that I am setting the Size value to 10, thus making it a list and not a combobox.

    In IE7 I can replicate the issue by setting the size after adding the options, but as soon as i move it to before adding the options it's fine.

    As for IE6 it still remains the same regardless.

    I've tried all the blur(), looping through and setting the selected property to false after appending etc and nothing works.

    I tested this using http://tredosoft.com/Multiple_IE and the following:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function test() {
                    var sel = document.createElement('SELECT');
                        sel.size = 10;
                        sel.options[sel.options.length] = new Option('test',0);
                        sel.onchange = function() {
                            alert('I bet you couldn\'t see me when using IE6');
                        };
                    document.getElementsByTagName('BODY')[0].appendChild(sel);
                }
                window.onload = test;
            </script>
        </head>
        <body>
            
            
    
        </body>
    </html>
    Thanks for looking into it.


  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This change should do it:
    Code:
                function test() {
                    var sel = document.createElement('SELECT');
                        sel.size = 10;
                        sel.options[sel.options.length] = new Option('test',0);
                        sel.onchange = function() {
                            alert('I bet you couldn\'t see me when using IE6');
                        };
                    document.getElementsByTagName('BODY')[0].appendChild(sel);
                    sel.selectedIndex=-1;
                }
    Also I would consider adding the onchange handler after appending.
    Last edited by Logic Ali; Aug 17, 2007 at 07:54.
    Tab-indentation is a crime against humanity.


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
  •