Putting javascript in the options of a select box
(demos on top of page)

In non-IE except Google Chrome, we can call functions from inside a select box by putting things like the following in the options of the box:
<option value="bla" onclick="some_function()"></option>
<option value="bla" onclick="window.open('http://www.google.com')"></option>

This is not possible in IE and Google Chrome. In an earlier attempt to solve the problem, I created a script based on the idea that it should be possible to let the text of the values for the options determine what function (whether custom or inbuilt) should be called (see this). So I wanted things like the following to work:
<option value="some_function()" ></option>
<option value="window.open('http://www.google.com')" ></option>

Here's the script:
<script type="text/javascript">
//This script enables execution of scripts by putting them in the options of selectboxes (if the text of a given option corresponds with the contents of a given script, then the script is executed when the option is clicked on).
function load_script_container()
{var div_node=document.createElement('div');
div_node.setAttribute("id", "script_container");

function javascript_in_selectbox(which_box) {
var optionValue=document.getElementById(which_box).options[document.getElementById(which_box).selectedIndex].value;
if (optionValue=="none") {}
else {
var script_inside_selectbox_option = document.createElement('script');
script_inside_selectbox_option.type = 'text/javascript';
script_inside_selectbox_option.text = optionValue;

It should work in cases like the following:
<select name="some_selectbox" id="some_selectbox" onchange="javascript_in_selectbox('some_selectbox'); selectedIndex=0">
<option value="none" selected >Some selectbox</option>
<option value="window.open('http://www.google.com')" >Load Google in new window</option>
<option value="location.href='http://www.dynamicdrive.com'" >Go to DynamicDrive in same window</option>
<option value="alert('This is an alert')" >An alert</option>
<option value="document.body.style.background='white'">Make background white</option>
<option value="background_blue()">Make background blue</option>
<!-- (Of course, the value given to the last option implies the existence on the page of a function called 'background_blue()'). -->

Unfortunately, after a while I discovered that the last versions of certain modern browsers exhibit the following behavior pertaining to loading new pages in the 'same window':
Although <option value="location.href=...">go to some page in same window</option> correctly executes the function given by the text of the value for the option, it makes the browser's history button do weird things.
Google Chrome:
<option value="location.href=...">go to some page in same window</option> doesn't always execute, or the new page loads very slowly.
Although <option value="location.href=...">go to some page in same window</option> correctly executes the function given by the text of the value for the option, it COMPLETELY DESTROYS the browser's history button. This is very strange, since this does not happen when loction.href=... is applied to other tags (other than the option-tag) like 'a', 'div' and 'span'.

I tried several second-versions of the original script. None of them worked. I then realized that, bearing in mind what has been explained above, the following should always work for cases in which we want to go to a new page in the same window:
<option value="if(!window.opera)location.href='...';" onclick="location.href='...'">go to some page in same window</option>
And it does! So now we have a crossbrowser way to use the options of a selectbox to execute all sorts of functions, including those that open new pages in the 'same window'.

© Arie Molendijk, http://classical-music.tk.