Firefox: set innerHTML of select element?

Discussion in 'Javascript' started by Michael Schuerig, Jun 17, 2005.

  1. I'm trying to change the options of a select element by setting its
    innerHTML. Here's a demo case:

    <html>
    <head>
    <script language="javascript" type="text/javascript">
    function addOpts() {
    var s = document.getElementById("s");
    s.innerHTML = '<option>Opt1</option><option>Opt2</option>';
    }
    window.addEventListener('load', addOpts, false);
    </script>
    </head>
    <body>
    <form>
    <select id="s">
    </select>
    </form>
    </body>
    </html>

    In Konqueror this works as intended, the select now has two options,
    "Opt1" and "Opt2". In Firefox, unfortunately, the code produces a
    TextNode containing "Opt1Opt2" as the only child of the select element.

    Is there a way to make Firefox behave as intended? If not, the next best
    option is to swap the entire select element. This works, but I'd prefer
    to change only the options.

    Michael

    --
    Michael Schuerig You can twist perceptions
    mailto: Reality won't budge
    http://www.schuerig.de/michael/ --Rush, Show Don't Tell
     
    Michael Schuerig, Jun 17, 2005
    #1
    1. Advertising

  2. Michael Schuerig

    bmgz Guest

    Michael Schuerig wrote:
    > I'm trying to change the options of a select element by setting its
    > innerHTML. Here's a demo case:


    I don't think that innerHTML will work on a <select>, I have just
    managed to change an <option> value by refering to:

    document.formName.selectName.options.text = "select me" (IIRC)

    If you want to ADD <options> then:

    document.formName.selectName.options[0] = new Option("text", "value")

    You could create a loop and poplate the Options from an array..
     
    bmgz, Jun 17, 2005
    #2
    1. Advertising

  3. Michael Schuerig wrote:

    > I'm trying to change the options of a select element by setting its
    > innerHTML. Here's a demo case:
    >
    > <html>
    > <head>
    > <script language="javascript" type="text/javascript">
    > function addOpts() {
    > var s = document.getElementById("s");
    > s.innerHTML = '<option>Opt1</option><option>Opt2</option>';


    > In Konqueror this works as intended, the select now has two options,
    > "Opt1" and "Opt2". In Firefox, unfortunately, the code produces a
    > TextNode containing "Opt1Opt2" as the only child of the select element.


    You will not have much luck with that approach, I have just tried such a
    test case here on Windows with Mozilla 1.7, IE 6 and Opera 8 and none of
    them is properly inserting options into the select, as you have already
    found out Mozilla inserts a single text node with the text in the option
    elements, and IE is inserting a mess of non option elements and text
    nodes while Opera inserts empty option elements interleaved with text nodes.
    IE's documentation here for innerHTML does not in any way suggest that
    innerHTML should not work on select elements:
    <http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/innerhtml.asp>

    In general you will be better off using one of the APIs (e.g. DOM 0 and
    new Option() or DOM 2 with document.createElement('option') and
    appendChild) if you want to create and insert options into a select.


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jun 17, 2005
    #3
  4. Martin Honnen wrote:

    > You will not have much luck with that approach, I have just tried such a
    > test case here on Windows with Mozilla 1.7, IE 6 and Opera 8 and none of
    > them is properly inserting options into the select, as you have already
    > found out Mozilla inserts a single text node with the text in the option
    > elements,


    I was going to file a bug on Mozilla but a test with a recent Mozilla
    1.8 nightly shows that the problem has been fixed on the Mozilla trunk.
    That of course does not help with existing releases but there is nothing
    more you can do about it.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jun 17, 2005
    #4
  5. Martin Honnen wrote:

    > In general you will be better off using one of the APIs (e.g. DOM 0
    > and new Option() or DOM 2 with document.createElement('option') and
    > appendChild) if you want to create and insert options into a select.


    That's true, of course. The point of using innerHTML for this is that I
    don't call it myself. I'm using Prototype.js
    (http://prototype.conio.net/) where innerHTML is set from the
    completion function of an XMLHTTPRequest. In general, this is very
    convenient. Transmitting data in XML or JavaScript format would be a
    lot more trouble. So I'll stick to innerHTML, but instead of the
    content of the select, I'll exchange the entire select.

    Thanks for your comments.

    Michael

    --
    Michael Schuerig The Fifth Rider of the Apocalypse
    mailto: is a programmer.
    http://www.schuerig.de/michael/
     
    Michael Schuerig, Jun 17, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. HANM
    Replies:
    2
    Views:
    734
    Joseph Kesselman
    Jan 29, 2008
  2. palmiere
    Replies:
    1
    Views:
    431
    Erwin Moller
    Feb 9, 2004
  3. Replies:
    4
    Views:
    194
    Thomas 'PointedEars' Lahn
    May 25, 2006
  4. sonic
    Replies:
    5
    Views:
    296
    Randy Webb
    Jul 11, 2006
  5. Phper
    Replies:
    10
    Views:
    389
    John G Harris
    Sep 14, 2009
Loading...

Share This Page