View RSS Feed

molendijk

Select boxes having javascript in the options

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

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>
etc.

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");
document.body.appendChild(div_node);}
window.onload=load_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;
while(document.getElementById("script_container").firstChild)
{document.getElementById("script_container").removeChild(document.getElementById("script_container").firstChild);}
document.getElementById("script_container").appendChild(script_inside_selectbox_option);
}
}
</script>

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>
</select>
<!-- (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':
Opera:
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.
Firefox:
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'.

THE SOLUTION:
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'.

DEMO here.

Arie Molendijk.

Submit "Select boxes having javascript in the options" to del.icio.us Submit "Select boxes having javascript in the options" to StumbleUpon Submit "Select boxes having javascript in the options" to Google Submit "Select boxes having javascript in the options" to Digg

Updated 12-01-2011 at 08:46 AM by molendijk (Corrections in text)

Tags: None Add / Edit Tags
Categories
JavaScript & Ajax

Comments