导航到URL取决于哪个<选项>在& lt; select>在javascript中选择
Navigate to URL depend on which <option> in <select> is chosen in javascript
所以,我知道如何导航到一个URL在javascript使用window.location.href="";
但是,我怎样才能听到a被选中呢?
例如,如果我的HTML看起来像这样:
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
我想在javascript中做的是,当有一个新的值选择时,要听。并在该事件导航到http://somesite.com/optionThatWasChosen。
在psuedo-code:var optionChosen = null;
select.onChange{
optionChosen = select.currentChosenOption;
window.location.href = "http://someSite.com/"+optionChosen;
}
如何在javascript或jQuery中做到这一点?
总之,分配你的选项值,IE:
<option value="xxx">New option</option>
然后为你的选择创建一个onchange
事件(确保给你的列表一个ID,我们将使用test
在这种情况下)。
纯JS(不需要jQuery):
document.getElementById("test").onchange = function() {
var selectedOption = this.value;
window.location.href = "http://someSite.com/" + selectedOption;
}
解决方案将取决于包含目标url的数组,并使用Jquery的index()。这只是一个选择器的问题。
<select id="locs">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
$(document).ready(function () {
locations = Array(
'http://yahoo.com',
'http://google.com',
'http://2index.net',
'http://go.com'
);
$("#locs").change(function () {
goto = locations[$("#locs>option:selected").index()];
window.location.href = goto;
})
});
现场演示在这里!
相关文章:
- 如何获得strut<html:select>jsp中java脚本中的值
- 处理& lt; select>在node.js/express中的Form参数
- 禁用& lt; select>当复选框启用时
- 导航到URL取决于哪个<选项>在& lt; select>在javascript中选择
- & lt; select>举个例子,最大限制选择5个
- 存储/生成& lt; select>供以后使用的选项
- & lt; select>当表单加载时,标签不加载所选项目
- & lt; select>Getter-setter接收字符串形式的对象参数
- 搜索& lt; select>在之前的多个元素之前
- AngularJS & lt; select>.选项上的' ng-click '不是工作
- & lt; select>选项在更改页面后保持不变
- HTML & lt; select>在页面加载时打开
- 访问& lt; select>onChange在木偶ItemView
- HTML & lt; select>焦点问题:使用Firefox需要2次点击来选择一个<选项>
- 触发& lt; select>另一个元素的click
- & lt; select>下拉输出MYSQL数据正确使用JS函数
- 单& lt; select>有多个选择选项
- 设置& lt; option>& lt; select>元素
- 转换& lt; select>在ASP.NET中将jQuery的选项转换为数组
- 使用jqtransform出错.& # 39;抵消().top& # 39;为空或不是对象.& lt; select>是