Change Select Options

by Matt Hopkins

HTML

<select id="myList">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

JavaScript

function changeOptions() {
    var selectedIndex = -1;
    var click = 0;
    var myList = document.getElementById("myList");
    var optionArray = ["One|1", "Two|2", "Three|3"];
    
    var fireFox = /Firefox/i.test(navigator.userAgent);
	console.log(fireFox);
    if (fireFox == false) {
    	myList.onmouseout=function(){changeList(false)};
    }
    myList.onblur=function(){changeList(false)};
    myList.onchange=function(){changeList(false)};
    myList.onmousedown=function(){changeList(true)};
    
    function changeList(listOpen) {
        var isListOpen = listOpen;

        if (isListOpen == true) {
            for (i = 0; i < myList.options.length; i++) { 
                var pair = optionArray[i].split("|");
    			myList.options[i].value = pair[0];
    			myList.options[i].innerHTML = pair[0];
			}
        }
        if (isListOpen == false) {
            for (i = 0; i < myList.options.length; i++) { 
                var pair = optionArray[i].split("|");
    			myList.options[i].value = pair[1];
    			myList.options[i].innerHTML = pair[1];
			}
        }
    }
}
changeOptions();