http://www.davesite.com/webstation/js/theory1jump.shtml
Drop Down List URL Jump Box
Scenario: I have three web sites I want to link to. I also don't want to bore my friends by having them all lined up in a row, or in a long unordered list. I want them to click a little drop down box, and have that site automatically load.
To accomplish this, I need to use a blank form, and I need to place a selection list on it. I need to add options for each of the three sites, and then I need to do a little JavaScript magic.
Caution: Why do I need a form? Compatibility. Without the form surrounding the drop down list, some browsers will refuse to allow the JavaScript to work properly.
Form and List without JavaScript
<form name="jump1">
<select name="myjumpbox">
<option selected>Please Select...
<option value="http://www.davesite.com/">davesite.com
<option value="http://www.neonlollipops.com/">neonlollipops.com
<option value="http://www.about.com/">about.com
</select>
</form>
Okay, well, now all we need to do is politely ask the web browser software change the current page location (address) to the one selected when someone chooses something from the drop down box. We'll use the event OnChange.
<form name="jump1">
<select name="myjumpbox"
OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value">
<option selected>Please Select...
<option value="http://www.davesite.com/">davesite.com
<option value="http://www.neonlollipops.com/">neonlollipops.com
<option value="http://www.about.com/">about.com
</select>
</form>
Feel free to try the jump box, and hit the back button to return to this page.
You are probably feeling a little like I did the first time I used this code. What does all of that line of gibberish mean?
OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value"
Here's the simple explanation. OnChange is the event. location.href is the browser's current location. We are telling the browser to look at jump1 (our form), then look at myjumpbox on jump1 (our listbox), then figure out which of our options is selected, and then copy whatever value that option has into the browser's current location.
So if we choose davesite.com, the browser gets this:
location.href=http://www.davesite.com/
Cha-Ching. We're at davesite.com.
Note: If you're using frames, and you want the link selected to load in the entire window and not just inside the current frame, change location.href to top.location.href.
If we want to be slick, we can tell the browser to open the page into a new browser window.
<form name="jump2">
<select name="myjumpbox"
OnChange="window.open(jump2.myjumpbox.options[selectedIndex].value)">
<option selected>Please Select...
<option value="http://www.davesite.com/">davesite.com
<option value="http://www.neonlollipops.com/">neonlollipops.com
<option value="http://www.about.com/">about.com
</select>
</form>
It sure looks silly, but all jump2.myjumpbox.options[selectedIndex].value holds is the value of the currently selected drop down list item.
分享到:
相关推荐
The book can be used as a text for a two semester sequence of courses in measure theory and probability theory, with an option to include supplemental material on stochastic processes and special ...
linear system theory and design solution: chen qizong
consensus bridging theory and practice
Subband Adaptive Filtering Theory and Implementation
Information theory and statistics.part1.rar
Probability: Theory and Examples,by Durrent,概率论专业经典教材。答案很少见,特意贡献~~~ 教材电子版已更新至第四版,可以在Durrent‘s homepage下载~!
SSL and TLS Theory and Practice.pdf SSL and TLS Theory and Practice.pdf SSL and TLS Theory and Practice.pdf SSL and TLS Theory and Practice.pdf SSL and TLS Theory and Practice.pdf SSL and TLS Theory ...
Antenna Theory and Design
The definitive textbook and professional reference on Kalman Filtering - fully updated, revised, and expanded This book contains the latest developments in the implementation and application of ...
Knowledge Management in Theory and Practice 第一版 知识管理经典
《Model Predictive Control: Theory and Design》这本书是国外大学学习模型预测控制(MPC)的指定教材,出版于2009年。
Theory and Applications of Image Registration By 作者: Arthur Ardeshir Goshtasby ISBN-10 书号: 1119171717 ISBN-13 书号: 9781119171713 Edition 版本: 1 出版日期: 2017-08-21 pages 页数: 499 A hands-...
Nonlinear Model Predictive Control_ Theory and Algorithms:second edition
Information theory and statistics
Statistical Models Theory and Practice Statistical Models Theory and Practice
Manifold learning theory and applications清晰版(英文).pdf。 注:版权归作者所有,请购买正版。 亚马逊价格:686.90/RMB
Probability - Theory and Examples
Small Unmanned Aircraft:Theory and Practice 源码,学习必备书籍项目源码,包含很多示例,全部由MATLAB/Simulink编写。
Organized for use as a text for an introductory course in stochastic processes at the senior level and as a first-year, graduate-level course in Kalman filtering theory and applications, this book ...
关于密码学从理论到实践的一本好书。 英文版,非影印!