|
I was just trying to get a multi select list set up so that when I mouse over one of the options in said list, it would show information in an adjacent div. In FireFox this worked just fine by adding an onmouseover to the option tags and have it update the div's innerHTML. But for IE, there was no happiness. IE apparently won't handle onmouseover or onclick for an option tag. Cause who cares about option tags. Well I finally came up with a solution, at least for my case.
In trying to find a solution, I kept trying to use the (propriatary) attachEvent method to attach an onmouseover or onclick event to my options. Again, no luck here. However I did find that I could use the test for attachEvent support to at least isolate IE and only use my solution for IE. So here's the code I ended up with:
My select list. I'm listing groups of skills and I want to show which skills are included in each group.
<div style="float: left;">
<select size="5" name="listSkillGroups" multiple="multiple" id="listSkillGroups" onclick="getText(this)">
<option value="20"
title="Small Equipment Operations, Hammering"
onmouseover="getText(this);">
Carpentry Skills</option>
<option selected="selected" value="2"
title="MS SQL, Oracle Database"
onmouseover="getText(this);">
Database</option>
<option value="4"
title="A+ Certification, PC Repair, Microsoft SMS"
onmouseover="getText(this);">
Desktop Engineering Skills</option>
<option value="18" title="MySQL, Apache, PHP Development, CSS, HTML"
onmouseover="getText(this);">
FOSS Experience</option>
<option value="5"
title="Microsoft Word, Microsoft Excel, Microsoft Sharepoint, Microsoft InfoPath"
onmouseover="getText(this);">
General PC Skills</option>
<option value="3" title="Small Equipment Operations, Small Equiment Repair, Tree/Plant Identification"
onmouseover="getText(this);">
Landscaping Skills</option>
<option selected="selected" value="1"
title=".NET, IIS, CSS, HTML" alt=".NET, IIS, CSS, HTML"
onmouseover="getText(this);">Web Development</option>
</select><br />
<span class="small">
(Use Ctrl or Shift Key to select multiple.)
</span>
</div>
<div id="SkillDetails" style="padding: 10px; float: left; width: 250px;"></div>
Now the javascript function for both the mouseover and onclick versions.
<script type="text/javascript" language="javascript">
<!--
var oSelected = ",";
function getText(ctrl) {
if (window.attachEvent) {
for (var o = 0; o < ctrl.options.length; o++) {
if (ctrl.options[o].selected == true && oSelected.indexOf("," + ctrl.options[o].value + ",") == -1) {
oSelected += ctrl.options[o].value + ",";
document.getElementById('SkillDetails').innerHTML = "<strong>Included Skills:</strong> " + ctrl.options[o].title;
} else if (ctrl.options[o].selected == false && oSelected.indexOf("," + ctrl.options[o].value + ",") != -1) {
oSelected = oSelected.replace(ctrl.options[o].value + ",", "");
}
}
} else {
document.getElementById('SkillDetails').innerHTML = '<strong>Included Skills:</strong> ' + ctrl.title;
}
}
-->
</script>
And finally, see it in action.
(Use Ctrl or Shift Key to select multiple.)
Relevant Tags: Browsers | JavaScript
[ Back to previous page ]
|