多个DropDown菜单列表问题

时间:2014-10-24 08:13:40

标签: jquery html

<html>
<head>
</head>
<body style=background-color:lightgreen;">
<!--font size="30" color="red">
<font size="10"-->

</p> <font size="30"> <font color="black"> <center> MSOC Tools and Database </font></p>


</p> <font size="10"> <font color="red"> <left> On-Boarding Documents </font></p>


<form name="jump">
<p align="left-side" >
<select name="menu">
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">Orchard Hotel</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">IDA</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Park%20Regis%20OnBoarding%20Docs.htm">Park Regis</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Golden%20Village%20OnBoarding%20Docs.htm">Golden Village</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">NTUC Link</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/MediaCorp%20OnBoarding%20Docs.htm">MediaCorp</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/South%20Beach%20OnBoarding%20Docs.htm">South Beach</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Golden%20Village%20OnBoarding%20Docs.htm">Golden Village</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">Gallery</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/InterConn%20IPPBX%20OnBoarding%20Docs.htm">InterConn</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">Planet Telecom</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Global%20Gateway%20OnBoarding%20Docs.htm">Global Gateway Resource</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Standard%20Charterd%20OnBoarding%20Docs.htm">Standard Chartered</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Allianz%20OnBoarding%20Docs.htm">Allianz</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/WestPac%20OnBoarding%20Docs.htm">WesPac</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">Hewlett Packard</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Dorsett%20Hotel%20OnBoarding%20Docs.htm">Dorsett</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</p>
</form>

<form name="jump">
<p align="left-side" >
<select name="menu">
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">Orchard Hotel</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">IDA</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Park%20Regis%20OnBoarding%20Docs.htm">Park Regis</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Golden%20Village%20OnBoarding%20Docs.htm">Golden Village</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">NTUC Link</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/MediaCorp%20OnBoarding%20Docs.htm">MediaCorp</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/South%20Beach%20OnBoarding%20Docs.htm">South Beach</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Golden%20Village%20OnBoarding%20Docs.htm">Golden Village</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">Gallery</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/InterConn%20IPPBX%20OnBoarding%20Docs.htm">InterConn</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">Planet Telecom</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Global%20Gateway%20OnBoarding%20Docs.htm">Global Gateway Resource</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Standard%20Charterd%20OnBoarding%20Docs.htm">Standard Chartered</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Allianz%20OnBoarding%20Docs.htm">Allianz</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/WestPac%20OnBoarding%20Docs.htm">WesPac</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Orchard%20Hotel%20OnBoarding%20Docs.htm">Hewlett Packard</option>
<option value="file:///Z:/OnBoarding%20Docs%20HTML/Dorsett%20Hotel%20OnBoarding%20Docs.htm">Dorsett</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</p>
</form>

我是这个环境中的新手,想请求协助我如何使用多个下拉菜单列表来处理我的简单网页。我知道这个JS是单个下拉菜单,只想得到一些关于如何获得的输入在多个下拉函数中使用它

var urlmenu = document.getElementById( 'menu1' );
 urlmenu.onchange = function() {
      window.open( this.options[ this.selectedIndex ].value );
 };

2 个答案:

答案 0 :(得分:0)

very easy
var urlmenu = document.getElementById( 'menu1' );
 urlmenu.onchange = function() {
      window.open( this.options[ this.selectedIndex ].value );
 };

用于菜单一

var urlmenu = document.getElementById( 'menu2' );
 urlmenu.onchange = function() {
      window.open( this.options[ this.selectedIndex ].value );
 };

用于菜单2

var urlmenu = document.getElementById( 'menu3' );
 urlmenu.onchange = function() {
      window.open( this.options[ this.selectedIndex ].value );
 };

用于菜单3

只需将menu1更改为任何不同的

答案 1 :(得分:0)

看起来像你真正想要的是创建一个共同的功能。

试试这个:

$('select').change(function(){
    var myVal = $(this).val();
    alert(myVal);
    //open window code here
    //blah blah
});

查看我的jsfiddle here