I have the following snippet of code that works without errors in FF and IE.
The display looks and acts correctly and as expected with FF.
However, in IE the first selection list does NOT display the ” (blank) entry whereas the hard coded version below it on the page does display the blank entry.
Why??? What is the difference between FF and IE for this script.
It appears that IE does not recognize the blank option unless hard coded. In fact it even changes the index values of the lists even when they are the same as seen by the alert test message.
Is there a work-around that functions the same in both browsers or is it just necessary that I hard code the select list values to avoid the missing (blank) option that I want to give the user?
[code=php]
<html>
<head>
<title>Test</title>
<script type=”text/javascript”>
var ReasonsList = new Array (
“”, “Out”, “Holiday”, “Business”, “Vacation”, “Personal”, “Midterms”, “Finals”
)
function SelectListReasons() {
document.write(‘<select id=”SLReason” name=”SLReason”‘);
for (var i=0; i<ReasonsList.length; i++) {
document.write(‘<option value=”‘+ReasonsList[i]+'” />’+ReasonsList[i]);
}
document.write(‘</select>’);
}
function xferSelectedValue() {
var sel = document.getElementById(‘SLReason’);
var sndx = sel.selectedIndex;
var sval = sel.options[sndx].value;
alert(sndx+’:’+sval); // for testing only
document.getElementById(‘selectlistvalue’).value = sndx+’:’+sval;
}
</script>
</head>
<body>
<h1>Test of Select</h1>
<script type=”text/javascript”>SelectListReasons();</script>
<input type=”text” id=”selectlistvalue” value=””> Chosen value
<br />
<button onclick=”xferSelectedValue()”>Get Selected Value</button>
<p />
<select id=”SList” name=”SList”>
<option value=””>
<option value=”Out”>Out
<option value=”Holiday”>Holiday
<option value=”Business”>Business
<option value=”Vacation”>Vacation
<option value=”Personal”>Personal
<option value=”Midterms”>Midterms
<option value=”Finals”>Finals
</select>
</body>
</html>