百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> javascript获取下拉菜单的值并跳转代码
分享文章到:

javascript获取下拉菜单的值并跳转代码

发布时间:01/15 来源: 浏览: 关键词:
跳转核心原理就是用户给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()""> 

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有2人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板