Forum Moderators: open
I have a page that has a large amount of single items to display. The best way I found was to list it within a multiple <select> box. What I need is for a popup window to be called once any given option in the list is selected. An ID will be passed to the popup and it will display the pertinent info that the user requested. I have this working in Firefox 3+, but cannot get it to work in IE 6 or 7.
I searched around the site (and google and other sites) and found this post:
[webmasterworld.com...]
This example shows how to popup a window from a dropdown menu (same principle) when the user was having problems getting it to work in IE as well, but the code on that page does not work as-is and I cannot seem to fix it.
Here is what I have so far. I have removed any personal info:
Javascript:
<SCRIPT LANGUAGE="JavaScript">
function popUp(URL) {
day = new Date();
id = day.getTime();
window.open(URL, id , 'toolbar=1,scrollbars=1,location=0,statusbar=1,menubar=1,resizable=1,width=750,height=600,left = 50,top = 50');
}
</script>
HTML (PHP markup removed):
<SELECT NAME='edit' MULTIPLE SIZE='25' id='edit'>
<option value='Selection Value' onClick="javascript: popUp('http://site.com/page.php?id=$Id')">Selection Name</option>
</select>
Obviously, the result would be to click the "Selection Name" and a popup is returned. Any help would be appreciated.
I have heard that the onClick event does not work when added to an <option> tag in IE, but cannot verify this. If this is true, does someone know of a workaround?
Thanks!
Your best bet is to use "onchange" on the select, here's a quick example of what you can do;
<select id="edit" multiple size="25" onchange="doSomething(this.options)">
<option value="Selection Value 1">Selection Name 1</option>
<option value="Selection Value 2">Selection Name 2</option>
<option value="Selection Value 3">Selection Name 3</option>
<option value="Selection Value 4">Selection Name 4</option>
<option value="Selection Value 5">Selection Name 5</option>
<option value="Selection Value 6">Selection Name 6</option>
<option value="Selection Value 7">Selection Name 7</option>
<option value="Selection Value 8">Selection Name 8</option>
</select><script type="text/javascript">
function doSomething(theIndexes){
i = 0;
while(i<=theIndexes.length) {
if (theIndexes[i].selected) {
//do something
alert(theIndexes[i].value)
}
i++;
}
}
</script>
