Need Help with Javascript in Firefox [resolved]

I have the following javascript, what it does is listen to what the user inputs and displays it in a different section of the webpage, the text fields are fine but the dropdowns are giving me a little trouble, they work fine in IE, if I select something in the dropdown it instantly appears but if I select something in Firefox it seems like its lost. Below is my code all help is greatly appreciated.

HTML Code:

---


<script language="JavaScript">
        if (window.addEventListener) {
          addEHandler = function(obj, eventName, handler) {
            obj.addEventListener(eventName, handler, false);
          };
          removeEHandler = function(obj, eventName, handler) {
            obj.removeEventListener(eventName, handler, false);
          };
        }
        else if (window.attachEvent) {
          addEHandler = function(obj, eventName, handler) {
            obj.attachEvent('on'+eventName, handler);
          };
          removeEHandler = function(obj, eventName, handler) {
            obj.detachEvent('on'+eventName, handler);
          };
        }
        var theDisplay4;
        var city_id_text;
        var theDisplay5;
        var state_id_dropdown;
        var theDisplay6;
        var country_name_dropdown;
        var theDisplay7;
       
        function doTextKeyUp()
        {
          while (!theDisplay5.hasChildNodes())
            theDisplay5.appendChild(document.createTextNode(''));
          theDisplay5.firstChild.data = city_id_text.value;
          while (!theDisplay6.hasChildNodes())
            theDisplay6.appendChild(document.createTextNode(''));
          theDisplay6.firstChild.data = state_id_dropdown.value;
          while (!theDisplay7.hasChildNodes())
            theDisplay7.appendChild(document.createTextNode(''));
          theDisplay7.firstChild.data = country_name_dropdown.value;
        }
       
        addEHandler(window, 'load', function() {
          city_id_text = document.getElementById('city_id_text');
          theDisplay5 = document.getElementById('theDisplay5');
          addEHandler(city_id_text, 'keyup', doTextKeyUp);
          state_id_dropdown = document.getElementById('state_id_dropdown');
          theDisplay6 = document.getElementById('theDisplay6');
          addEHandler(state_id_dropdown, 'change', doTextKeyUp);
          country_name_dropdown = document.getElementById('country_name_dropdown');
          theDisplay7 = document.getElementById('theDisplay7');
          addEHandler(country_name_dropdown, 'change', doTextKeyUp);
        });
       
                               
        </script>

<strong><span id="theDisplay5"></span>, <span id="theDisplay6"></span> <span id="theDisplay7"></span></strong>

---

A select box doesn't have a value property in Firefox. To get the current value of a selectbox sel, use this code:
sel.options[sel.selectedIndex].value
or add the value property dynamically using this code:

Code:

---

sel.prototype.__defineGetter__('value', function() {
        return this.selectedIndex < 0 ? undefined :
                this.options[this.selectedIndex].value;
});

sel.prototype.__defineSetter__('value', function(v) {
        var idx = -1;
        for(var i = 0; i < this.options.length; ++i) {
                if(this.options[i].value == v) {
                        idx = i;
                        break;
                }
        }
        this.selectedIndex = idx;
});

---

Doing this once to any one select box should then make the property value available to all select boxes in the page, acting exactly like you would expect it to. You should, of course, guard that code snippet with tests for the existence of the value property on the sel object and the existence of the __defineGetter__ and __defineSetter__ methods.

Thanks Cornedbee I give that a try and see what happens

CornedBee, is it possible for you to show me an example of how Im suppose to incorporate your code into my code. I have been playing around with it for a while and cant seem to get it working.

Strangely enough, tests in my recent Firefox 1.5 show me that it actually does support the value property on HTMLSelectElement, as do Opera 9 and Konqueror 3.5.5 (but the latter one knows it as SELECT, not HTMLSelectElement).

So while I probably could show you how to use my snippet, it should not be necessary. Could the error be something else? Have you debugged your code with Firebug or Venkman?

CornedBee, I managed to get it working, it wasnt your snippet as I thought it was missing quotes in my html.

Thanks for you help