javascript获取下拉菜单的值并跳转代码
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 跳转核心原理就是用户给select加一个改变事情，然后用户点击时再由js获取select 选中的那一句的值，进行跳转了，有需要了解的同学可参考。...
|
我最常用的代码，核心代码就是
| 代码如下 |
复制代码 |
|
script language="JavaScript">
function jump()
{
location.href=document.myform.menu1.value;
}
</script>
|
html代码
| 代码如下 |
复制代码 |
|
<select name="menu1" onChange="jump()">
<option>---请选择季节景色---</option>
<option value="spring.htm">春天美景</option>
<option value="summer.htm">夏天一色</option>
<option value="autumn.htm"> 秋天枫叶</option>
<option value="winter.htm">冬天白雪</option>
</select>
|
像友情连接一样跳转效果
| 代码如下 |
复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转移菜单</title>
<script type="text/javascript" src="转移菜单.js"></script>
</head>
<body>
<form>
<select id="newLocation">
<option selected="selected" value="">Select a topic</option>
<option value="topic1.html">topic1</option>
<option value="topic2.html">topic2</option>
<option value="topic3.html">topic3</option>
<option value="topic4.html">topic4</option>
<option value="topic5.html">topic5</option>
</select>
<!--当浏览器不支持javascript或者禁用脚本运行时被调用-->
<noscript>
<input type="submit" value="Go There!"/>
</noscript>
</form>
</body>
</html>
|
js 代码
| 代码如下 |
复制代码 |
|
window.onload=initForm;
//防止页面缓存，无法触发onload
window.onunload=function(){}
function initForm(){
document.getElementById("newLocation").selectIndex=0;
document.getElementById("newLocation").onchange=jumpPage;
}
function jumpPage(){
var newLoc=document.getElementById("newLocation");
var newPage=newLoc.options[newLoc.selectedIndex].value;
if (newPage!=""){
window.location=newPage;
}
}
|
点击按钮跳转代码
| 代码如下 |
复制代码 |
|
function changeGroup()
{
if(window.confirm("您真的要转移邮件组吗?")==false)return false;
var obj=document.getElementById("mail_group");//源下拉菜单
var obj2=document.getElementById("select3");//目标下拉菜单
if(obj && obj2)
{
var n=obj.options.selectedIndex;//selectedIndex是的当前选择项的索引值，从0开始从上往下依次递增，没选中是-1
//简单的说你可以将列表框理解为一个数组，selectedIndex就是这个数组的索引值，它对应的就是列表中该位置显示的项
var m=obj2.options.selectedIndex;
if(n>=0)
{
location.href="mail_group_action1.php?id="+obj.options[n].value+"&uid="+obj2.options[m].value;
return;
}
}
}
|
html代码
| 代码如下 |
复制代码 |
|
<input type="button" value="转" onClick="changeGroup()"">
|
|
