adding items to <select> in IE5

Question

Ill just awnser the first question... Why IE5 you wonder, Because its on a Windows CE device that im working with so im limited to use IE5. The application that i've made uses a webpage with a couple of elements.

I have two textfields and one list or <select> I want to transfer the value of one textbox to the list. I've got it working in IE 10 and Chrome but when i tested the webpage on the device it did not send the value of textfield two to the list. Can anyone help me solve this issue?

This is my html code:

 <tr>
                    <td>Locatie:</td>
                    <td><input type="text" id="one" onkeyup="CheckOne()" name="locatie" value="{locatie}" /></td>
                </tr>
                <tr>
                    <td>Bonregel:</td>
                    <td><input type="text" name="bonregel" id="two" onkeyup="CheckTwo(event)" /></td>
                </tr>
                <tr>
                    <td>Bonlijst:</td>
                    <td><select id="selectbox" multiple></select></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Verzenden" id="sub" onclick="CheckContent()" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="Velden Legen" id="reset" onclick="ClearFields()" /></td>
                </tr>

And then i have my javascript functions for adding the data to the list:

function AddToList(field) {
                // Create an Option Object
                var opt = document.createElement("option");
                document.getElementById("selectbox").options.add(opt);
                opt.text = document.getElementById("two").value;
                opt.value = document.getElementById("two").value;
            }

function CheckTwo(event) {
                var field = document.getElementById("two").value;
                var tKey = (event.which) ? event.which : event.keyCode;
                if (tKey == 51) {
                    AddToList(field);
                    GiveFocus("two");
                }
            }



// Gives focus to the specified component
            function GiveFocus(id) {
                document.getElementById(id).focus();
            }

            // Action that gets triggered by textfield 1
            function CheckOne() {
                if (event.keyCode == 13)
                    GiveFocus("two");
            }

Edit

I've figured out that the button takes priority for some kind of reason. The button submits as soon as i press enter. But when i press enter in the second textfield it should send the data to the list. Is there a solution so the button doesnt take priority

Heres a fiddle of my full code: https://jsfiddle.net/3jywt8v1/1/

Answer 1

On IE5, you probably need to use the Option constructor rather than createElement:

function AddToList(field) {
    // Create an Option Object
    var val = document.getElementById("two").value;
    var opt = new Option(val, val);
    document.getElementById("selectbox").options.add(opt);
}

It also works on modern browsers.

I think add, what you're using, is the most compatible way to add the option to the list, but if that isn't it, you may need to add it via assignment instead:

var options = document.getElementById("selectbox").options;
options[options.length] = opt;

...but again, I think add was better supported in the 90s.