Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    creating option field with appendChild

    Hey guys, I'm creating a new field using the document.createElement, this is a new option for a select but cannot make the text to appears, I tried everything "but the correct syntax" i'm sure, can you help????

    var parent = document.getElementById("box4");
    var children = parent.all.tags("select");
    var son = children[0];
    var option = son.children.op1;
    alert(option.value);
    option.text = "text modified";

    var txtFld = document.createElement("option");
    //txtFld.setAttribute("type","new option");
    txtFld.setAttribute("name","newOption");
    txtFld.setAttribute("text","the new option text");
    txtFld.setAttribute("id", "id2");
    txtFld.setAttribute("value","thenewoptionvalue");
    son.appendChild(txtFld);

  • #2
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've got a Select class which encapsulates this functionality into a method, and works in Gecko browsers and IE6:

    Code:
    function Select (elName) {
        this.element = document.createElement('select');
        this.element.id = this.element.name = elName;
    }
    
    Select.prototype.populate = function (text, values) {
        if (!text || typeof(text) == 'string') {
            return;
        }
        if (typeof(values) == 'undefined' || typeof(values) == 'string') {
            values = text;
        }
        var end = Math.max(text.length, values.length),
            i = 0, o;
        do {
            this.addOption(text[i], values[i]);
        } while (end > ++i);
    }
    
    Select.prototype.addOption = function (text, value, before) {
        var o = document.createElement('option');
        o.text = text;
        o.value = value;
        if (!before) {
            before = null;
        }
        try {
            this.element.add(o, before)
        } catch (er) {
            try {
                if (!isNaN(before) && before != null) {
                    before = this.element.options[before];
                } 
                this.element.add(o, before);
            } catch (err) {
                this.element.add(o);
            }
        }
    }
    You can see that it doesn't use the appendChild() method, mainly because I couldn't get it to work either, no matter how hard I tried. Then comes the fact that IE and Gecko implement different versions of the same add() method, where in some cases the second argument is required to be a number, and in others it's required to be a node, and in some cases it's optional, others required.

    At least it's not as bad a PITA as radio buttons.

  • #3
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The way you would do it is as follows:

    ...
    children[0].options[0] = new Option("Text", "Value");
    children[0].options[1] = new Option("Text", "Value");
    children[0].options[2] = new Option("Text", "Value");
    children[0].options[3] = new Option("Text", "Value");
    ...

    The options array has no bounds on it -- at least I've never tested the bounds...

    Hope that helps,
    Sadiq.

  • #4
    New Coder
    Join Date
    Jan 2004
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great !!! that's the solution I was looking for, and just came to my mind. you can even do...

    children[0].options[children.length++] = new Option("Text", "Value");
    so you don't have to worry about the correct index..."in case you want the new element at the end"...

    Thanks again Friends....


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •