Forum Moderators: open
instead of clicking/touching the select form to initiate the iphone function i want to simply have a href link to toggle the form to open/close.
something like:~
<a href="#" onClick="toggle-menuselect()">Menu</a>
<form name="menuselect" style="visibility:hidden">
<select name="menu" title="menu" onChange="Url()">
<option value="1.html">one</a></option>
<option value="2.html">two</option>
<option value="3.html">three</option>
</select>
</form>
here the Url() script i use to close and follow the iphone selection interface after clicking a link
function Url()
{
location=document.menuselect.menu.options[document.menuselect.menu.selectedIndex].value
}
A solution would be greatly appreciated as im not too hot on javascript. many thanks, simon.
<select name="menu" title="menu" onChange="location=this.options[this.selectedIndex].value;">
all i want is to be able to toggle the combo from closed state to open state, not selecting an option. This has proved very hard so far as most folks dont understand why i want this function. Reason is simple,on the apple iphone when you surf to a page where an options list is embeded the iphone launchs its native selector, this is what i want to initiate from a href link or image link that is outside the form tags. any help is much appreciated and thanks to all those already helping.
best regards,simon
Some notables:
- doctype all on one line in my example, run on two here to keep from exploding the thread width.
- in window.onload, I set the display to none, otherwise it will require two clicks (try it and see.) Also this removes the onclick() from the link itself, and onChange() from the select, separating behavior from markup.
- use document.getElementByID, referencing objects by name is deprecated.
- Note the bolds, what you want is display:none, not hidden.
- my JS is more lines, but easier to read when dealing with select list indices.
- you are using a variable named location that is undefined, use window.document.location.
- dashes are not allowed in function names.
- Always use a valid link for an anchor and return false from the function it calls. This allows some content to display if JS is disabled and is an accessibility concern. The return false is what stops a link or form from performing it's natural action (navigate or submit) when clicked or submitted, allowing Javascript to manage the function, while still being active if Javascript is disabled/not present.
- document.getElementByID sufficiently tests for Javascript function (and that the method document.getElementByID is present, no browser ID required.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Show/Hide</title>
<style type="text/css">
#menuselect { display:none; }
</style>
<script type="text/javascript">
function URL() {
if (document.getElementById) {
var ind = document.getElementById('menu').selectedIndex;
var loc = document.getElementById('menu').options[ind].value
window.document.location=loc;
return false;
}
}
function toggle_menuselect() {
if (document.getElementById) {
var obj = document.getElementById('menuselect');
obj.style.display=(obj.style.display=='none')?'block':'none';
}
return false;
}
window.onload=function() {
if (document.getElementById) {
document.getElementById('menu_link').onclick=function() { return toggle_menuselect(); }
document.getElementById('menuselect').onchange=function() { return URL(); }
document.getElementById('menuselect').style.display='none';
}
}
</script>
</head>
<body>
<p><a href="html-file-with-menu-links.html" id="menu_link">Menu</a></p>
<form name="menuselect" id="menuselect">
<select name="menu" id="menu">
<option value="1.html">one</a></option>
<option value="2.html">two</option>
<option value="3.html">three</option>
</select>
</form>
</body>
</html>
