Simple innerHTML issue

Discussion in 'Javascript' started by Christopher Benson-Manica, Oct 22, 2003.

  1. I'm trying to dynamically change the contents of a select box by doing the
    following...

    function myfunc() {
    var obj=document.getElementById("objname"); // name of the select box
    var str='';
    str+='<option>blah</option>';
    obj.innerHTML=str;
    alert(obj.innerHTML);
    }

    For reasons I don't understand, the alert gives me 'blah</option>'. Where is
    the leading <option> tag?

    --
    Christopher Benson-Manica | I *should* know what I'm talking about - if I
    ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
    Christopher Benson-Manica, Oct 22, 2003
    #1
    1. Advertising

  2. I'm not sure you ammend select objects like this......i.e whether it works
    in various browsers.
    I'd strip it out and create 'new Option'

    Someone else may have a suggestion, but I am not sure this is the right
    route for modifying options myself.....I could be wrong.

    Stu


    "Christopher Benson-Manica" <> wrote in message
    news:bn639g$de9$...
    > I'm trying to dynamically change the contents of a select box by doing the
    > following...
    >
    > function myfunc() {
    > var obj=document.getElementById("objname"); // name of the select box
    > var str='';
    > str+='<option>blah</option>';
    > obj.innerHTML=str;
    > alert(obj.innerHTML);
    > }
    >
    > For reasons I don't understand, the alert gives me 'blah</option>'. Where

    is
    > the leading <option> tag?
    >
    > --
    > Christopher Benson-Manica | I *should* know what I'm talking about - if I
    > ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
    Stuart Palmer, Oct 22, 2003
    #2
    1. Advertising

  3. Christopher Benson-Manica

    DB McGee Guest

    This works:

    <html>
    <head>
    <title>Dynamically Add Option to a Select Menu</title>
    <script type="text/javascript">
    function addOption() {
    var oSelect = document.getElementById( 'myselect' )
    nextOptIndex = oSelect.length + 1
    newOpt = document.createElement( 'OPTION' );
    newOpt.text = "New Option #" + nextOptIndex
    newOpt.value = nextOptIndex
    oSelect.add( newOpt, nextOptIndex )
    }
    </script>
    </head>
    <body>
    <h1>Dynamically add an option to a select menu</h1>
    <select name="myselect" id="myselect">
    <option value="default">choose me</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <input type="button" value="add" name="add" onClick="addOption()">
    </body>
    </html>



    "Christopher Benson-Manica" <> wrote in message
    news:bn639g$de9$...
    > I'm trying to dynamically change the contents of a select box by doing the
    > following...
    >
    > function myfunc() {
    > var obj=document.getElementById("objname"); // name of the select box
    > var str='';
    > str+='<option>blah</option>';
    > obj.innerHTML=str;
    > alert(obj.innerHTML);
    > }
    >
    > For reasons I don't understand, the alert gives me 'blah</option>'. Where

    is
    > the leading <option> tag?
    >
    > --
    > Christopher Benson-Manica | I *should* know what I'm talking about - if I
    > ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
    DB McGee, Oct 22, 2003
    #3
  4. DB McGee <> spoke thus:

    > <title>Dynamically Add Option to a Select Menu</title>
    > (snipped)


    Thanks - I think I'm undestanding why what I had didn't work. The options are
    an array and I wasn't treating them like one...

    --
    Christopher Benson-Manica | I *should* know what I'm talking about - if I
    ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
    Christopher Benson-Manica, Oct 22, 2003
    #4
  5. Christopher Benson-Manica <> writes:

    > I'm trying to dynamically change the contents of a select box by doing the
    > following...


    Since you don't say which browser you are using, I'll assume it is
    iCab on a Macintosh.

    Just kidding, I'll assume it is IE on Windows, since that is what it
    usually is when people don't say.

    Don't use innerHTML to change the content of a select element in IE.
    The content of a select element isn't general HTML, and it won't work
    as you expect it to. Using innerHTML adds child nodes to the select
    node in the DOM tree, not options to the options collection.

    Use
    selectRef.add(new Option("text","value"))
    instead.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Oct 22, 2003
    #5
  6. Hi Stuart,

    1) document.getElementById is not crossBrowser compatible -- it will
    be recognized only by version 5+ browsers.

    2) if you want to change a specific option's value/text, the following
    is sufficient:


    function doit(selObj, ndx)
    {
    txt = 'a'
    selObj.options[ndx].text = txt;
    selObj.options[ndx].value = txt;
    }

    <form name='a'>
    <select name="b" onchange="alert(this.options[this.selectedIndex].value)">
    <option value='0'>1</option>
    <option value='1'>2</option>
    <option value='2'>3</option>
    </select>
    <input type="button" onclick="doit(this.form.b, 2)">
    </form>

    3) if you want to remove an option, you either set that index to null
    selObj.options[0] = null
    or set the options.length to some number
    selObj.options.length = 0;

    4) if you wish to append new options, you need to use the new Option()
    constructor. see the selection list script/tutorials at my GrassBlade
    Javascript site: http://members.aol.com/grassblad

    Vinny


    > "Christopher Benson-Manica" <> wrote in message
    > news:bn639g$de9$...
    > > I'm trying to dynamically change the contents of a select box by doing the
    > > following...
    > >
    > > function myfunc() {
    > > var obj=document.getElementById("objname"); // name of the select box
    > > var str='';
    > > str+='<option>blah</option>';
    > > obj.innerHTML=str;
    > > alert(obj.innerHTML);
    > > }
    > >
    > > For reasons I don't understand, the alert gives me 'blah</option>'. Where

    > is
    > > the leading <option> tag?
    > >
    > > --
    > > Christopher Benson-Manica | I *should* know what I'm talking about - if I
    > > ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
    Vincent Puglia, Oct 22, 2003
    #6
    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. Paul
    Replies:
    1
    Views:
    3,202
    bruce barker
    Aug 4, 2003
  2. Replies:
    9
    Views:
    22,829
  3. Reed

    body.innerHTML issue

    Reed, Jun 4, 2004, in forum: Javascript
    Replies:
    4
    Views:
    97
    Grant Wagner
    Jun 4, 2004
  4. Replies:
    9
    Views:
    121
  5. sonic
    Replies:
    5
    Views:
    282
    Randy Webb
    Jul 11, 2006
Loading...

Share This Page