javascript落到实处跳转菜单,javascript获取下拉菜单的值并跳转代码

跳转主旨原理正是顾客给select加二个改观职业,然后客户点击时再由js获取select
选中的那一句的值,举行跳转了,有亟待了然的同班可参看。

传统
图片 1

本身最常用的代码,主题代码就是

这里要做的是,省略Go There开关,接收菜单项后,间接跳转。

 代码如下

 图片 2

复制代码

 

script language=”JavaScript”>
function jump()
{
location.href=document.myform.menu1.value;
}
</script>

Html代码

html代码

[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; 
<html xmlns=”; 
<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> 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<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>

复制代码

 

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

Javascript脚本[javascript]
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; 
            } 
         
        } 
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;
   }
  
  }

 代码如下

摘自 贾琳的特辑
 

复制代码

这里要做的是,省略Go
There按键,选拔菜单项后,直接跳转。 Html代码 [html] !DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN …

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; 
<html xmlns=”; 
<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 代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注