`

js(select onchange)的网页跳转

阅读更多
方法一:

<select   onchange="goUrl(this.options[this.selectedIndex]);"> 

<option>==</option> 

<option   value='http://www.csdn.net'   target="_blank">csdn</option>   

<option   value='http://www.163.com'   target="_self">163.com</option> 

</select> 

<script> 

function   goUrl(obj){ 

if(obj.target=='_blank')window.open(obj.value); 

if(obj.target=='_self')location.href=obj.value; 



</script>

方法二:

TE>TE>

select页面跳转及获值

   1. <select onchange="window.location.href=this.options[selectedIndex].value" >
   2.     <option value="http://www.google.com" >谷歌</option>
   3.     <option value="http://www.yahoo.com" >雅虎</option>
   4.     <option value="http://www.baidu.com" >百度</option>
   5. </select>

这里主要用到 :

1.window.location.href 跳转,如果想在新窗口中打开,可以用 window.open(this.options[selectedIndex].value).

2.this.options[selectedIndex].value取值.

注意:javascript是严格区分大小写的!只能写成selectedIndex.
分享到:
评论

相关推荐

    JavaScript实现通过select标签跳转网页的方法

    本文将深入探讨如何使用JavaScript与HTML的`&lt;select&gt;`标签结合,实现在用户选择不同的选项时跳转到不同的网页。这对于创建动态菜单或者自定义导航链接来说是非常实用的。 一、当前页面直接跳转 在`&lt;select&gt;`标签中...

    JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

    首先,JQuery是目前最为流行的JavaScript库之一,它极大地简化了在网页上进行DOM操作、事件处理、动画效果以及Ajax交互等操作。在本例中,我们利用JQuery来实现对select标签onchange事件的监听和处理。通过$...

    js实现select跳转菜单新窗口效果代码分享(超简单)

    这是一款基于js实现select跳转菜单新窗口效果代码,分享给大家学习学习 运行效果图:———————-查看效果———————– 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的js实现...

    js简单实现HTML标签Select联动带跳转

    2. JavaScript部分(JScript1.js): ```javascript var groups = document.form5.domain.options.length; var group = new Array(groups); for (i = 0; i ; i++) { group[i] = new Array(); // 根据i值填充数组...

    javascript各种跳转

    这些跳转方法在网页开发中非常实用,可以根据需求选择合适的方式进行页面导航。不过需要注意的是,为了避免不必要的用户体验问题,应当谨慎使用页面跳转,并确保用户对即将发生的变化有明确的认知。

    JavaScript实现单击下拉框选择直接跳转页面的方法

    这种方法适用于网页设计中用户需要快速选择并跳转到不同页面的场景,例如网站的导航菜单或者内容索引等。通过实现这个功能,可以有效提升用户体验,简化用户的操作步骤。 首先,我们需要了解HTML中的`&lt;select&gt;`元素...

    DropdownList点击跳转网址

    &lt;select value={selectedOption} onChange={handleSelectChange}&gt; &lt;option value="url1"&gt;Option 1 {/* 更多选项 */} &lt;/select&gt; ); } ``` 综上所述,DropdownList点击跳转网址涉及到HTML、JavaScript、AJAX、...

    JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转

    总结一下,本文通过一个实际的示例,介绍了如何使用JavaScript实现下拉列表与文本框的联动,以及通过按钮实现网址跳转。这个过程涉及到HTML元素的选择、属性的读取与设置,以及JavaScript事件的处理。对于初学者来说...

    PHP跳转方法

    &lt;select name="qq" onchange="javascript:location.href=this.value;"&gt; &lt;option value="http://www.zol.com.cn" selected="selected"&gt;zol &lt;option value="http://www.163.com"&gt;163 ...

    网页设计常用的Javascript特效代码

    在网页设计中,JavaScript是一种非常重要的脚本语言,它能够为网页增添丰富的动态效果和交互性。以下是一些常见的JavaScript特效代码,可以帮助提升用户体验和页面的吸引力。 **字号缩放**: 这个特效允许用户根据...

    HTML 中 select 的学习

    在提供的代码片段中,展示了如何使用`onchange`事件来触发函数`menu()`,进而根据用户选择的选项值进行页面跳转。 ```javascript function menu(form) { var num = form.url.selectedIndex; window.location.href...

    下拉菜单点击实现连接跳转功能的js代码

    在提供的代码示例中,定义了一个名为MM_jumpMenu的JavaScript函数,这个函数的目的是在用户在下拉菜单中选择一个选项时,触发网页跳转的动作。这个函数接收三个参数: 1. targ:一个字符串,指定要跳转的父级窗口...

    html select标签加链接3种方法

    在这种方法中,我们为`&lt;select&gt;`标签添加`onchange`事件,当用户选择一个选项时,会调用指定的JavaScript函数。例如: ```html &lt;SELECT onchange="mbar(this)"&gt; &lt;OPTION selected&gt;=== 合作伙伴 === 百度 网易 ...

    在网页中添加复杂的菜单和列表组合

    &lt;select onchange="openNewWindow(this.value)"&gt; 请选择 &lt;!-- 具体菜单项 --&gt; &lt;/select&gt; ``` 在这个例子中,`onchange`事件监听器用于检测菜单项的变化,一旦用户选择了某个选项,就会调用`openNewWindow`函数,...

    React-rcselect一个完美的ReactSelect组件

    在样式方面,rc-select支持主题定制,允许你通过CSS-in-JS或者CSS Modules的方式改变组件的外观。它默认提供了简洁且响应式的样式,但你也可以根据项目风格进行深度定制,以保持整体设计的一致性。 在无障碍性...

    javascript实现跳转菜单的具体方法

    javascript实现跳转菜单的具体方法,是指使用JavaScript脚本语言来控制网页中的菜单项选择后直接跳转到对应的页面。这种方法可以提高用户在不同页面间的转换效率,同时省略了传统的“前往”按钮。具体实现方式,首先...

Global site tag (gtag.js) - Google Analytics