adding option elements dynamically to a select

richard.york · November 30th, 2003, 07:20 PM

Code:

<html>
    <head>
        <style>

            div.formfield {border: 1px solid #000000}

        </style>
    </head>
    <body>

        <script language='JavaScript' type='text/javascript'>

            var child;

            function form_child()
            {
                child = window.open('', 'child_win', 'width=550,height=100');

                child.document.open();

                child.document.write("<form name='dest'>");
                child.document.write("<select name='test' size='3' multiple='multiple'>");
                child.document.write("<option value='value1'>value1</option>");
                child.document.write("<option value='value2'>value2</option>");
                child.document.write("</select>");
                child.document.write("<input type='submit' name='do_action' value='Post' />");
                child.document.write("</form>");

                child.document.close();

                var n;
                var index;
                var new_option;
                var text_element    = document.source['test'].value;

                var select_element    = child.document.dest['test'];
                var values            = text_element.split(',');

                for (n = 0; n < values.length; n++)
                {
                    if (false !== (index = in_options(values[n], select_element)))
                    {
                        select_element.options[index].selected = true;
                    }

                    else
                    {
                        new_option = select_element.length + 1;
                        select_element.options[new_option] = new Option(values[n], values[n], false, true);
                    }
                }
            }

            function in_options(search, select_element)
            {
                var i;

                for(i = 0; i < select_element.length; i++)
                {
                    if (search == select_element.options[i].value)
                    {
                        return i;
                    }
                }

                return false;
            }

        </script>
        <form name='source'>
            <div class='formfield'>
                <div class='formdescription2'>
                    <div class='formtext'>
                        <a href='javascript:void(0);' onclick='form_child()'>Move value:</a>
                    </div>
                </div>
                <div class='forminput2' id='mail_composerfield6'>
                    <input type='text' name='test' value='value1' size='50' />
                </div>
            </div>
        </form>
    </body>
</html>

Basically my problem goes like this.. I have a text element in the opened window. Once the 'Move Value' link in clicked an event handler fires and the data is to get transferred to a <select> element in the child window that opens. The data then gets exploded into an array via the split method. If the data is already in the select menu then it is to be merely selected, if not then a new option should be added.

The problem I am experiencing is when I run the code in IE the browser crashes when it gets to the line:

select_element.options[new_option] = new Option(values[n], values[n], false, true);

And in Mozilla it does nothing but highlight the existing elements as selected but does not add new options.

The application for this is I am wanting to open up an address book into the child window where a user can highlight email addresses and then those addresses are passed back to the parent window. If addresses appear in the text field that aren't in the address book supplied by the database they just get appended to the bottom of the select field.

I hope all that makes sense!
Any help gratefully received!
: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::

joefawcett · December 1st, 2003, 05:26 AM

A select elemnet is different to most other controls. It has its own handle and you have less control over style etc. One of the things you cannot do is move option elements from one document to another. There are two solutions to your problem, either use the the child to create the element:

Code:

select_element.options[new_option] = new child.Option(values[n], values[n], false, true);

I haven't tested that way, I normally use the createElement syntax:
[code]
var oOption = child.document.createElement("option");
oOption.value = values[n];
oOption.text = values[n];
//can't remember what other arguments represent :)
select_element.options.add(oOption);
[code]
A slightly different way would be to have function, "addNewOption", to do this actually in the child window and call this function via child.addNewOption(values[n], values[n], false, true).

--

Joe

richard.york · December 4th, 2003, 12:41 AM

Thanks Joe.. I haven't tried it out yet but it makes sense. I didn't think to append the reference to the child window to the call on the Option() method.

Both methods look to fit the bill!

I appreciate your insight!
: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::

richard.york · December 4th, 2003, 06:33 PM

I ended up going with the second option you presented which worked as expected.

Code:

var new_option;

new_option              = child.document.createElement('option');
new_option.value        = values[n];
new_option.text         = values[n];
new_option.selected     = true;

select_element.options.add(new_option);

When I used the first method, with the Option object, I got an error saying the creation of an option was not allowed there... or something to that effect. No matter though, the second method works fine.

Is there a method in JavaScript that will trim away any leading or trailing whitespaces or will I have to use a regular expression? In PHP, simply enough the function is called trim() is there a JS equivalent?

: )
Rich

:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::

joefawcett · December 5th, 2003, 04:57 AM

Code:

<html>
  <head>
    <title>JavaScript Trim</title>

    <script type="text/javascript">
      function lTrim()
      {
        return this.replace(/^\s+/, "");
      }

      function rTrim()
      {
        return this.replace(/\s+$/, "");
      }

      function trim()
      {
        return this.replace(/^\s+|\s+$/g, "");
      }

      String.prototype.lTrim = lTrim;
      String.prototype.rTrim = rTrim;
      String.prototype.trim = trim;


      function doTrim(Which)
      {
        var oData = document.getElementById("txtData");
        var oResult = document.getElementById("txtResult");
        switch (Which)
        {
          case 'left':
            oResult.value = oData.value.lTrim();
          break;
          case 'right':
            oResult.value = oData.value.rTrim();
          break;
          default:
            oResult.value = oData.value.trim();          
        }
      }
    </script>
  </head>
  <body>

  Data:<input type="text" size="30" id="txtData">&nbsp;&nbsp;
  Result:<input type="text" size="30" id="txtResult"><br><br>
  <input type="button" value="lTrim" onclick="doTrim('left')">&nbsp;&nbsp;
  <input type="button" value="rTrim" onclick="doTrim('right')">&nbsp;&nbsp;
  <input type="button" value="trim" onclick="doTrim('both')">
  </body>
</html>

The above html page shows one way, there are no built-in methods.

--

Joe