Question

我有一个下拉列表，其代码如下：

<select name="month" onchange="updateURL()">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  ...
  <option value="12">December</option>
</select>

如您所见，当它发生变化时，它会调用javascript函数：updateURL（）。

我应该在updateURL函数中添加哪些代码，以便将文档的位置更改为：

/calendar/(insert value of the selected option here)

Answer 1

如您所见，当它发生变化时，它会调用javascript函数：updateURL（）。

这不一定是个好主意。当键盘用户使用箭头键单步执行选项时，也会触发select元素的onchange，因此页面更改使得无法在键盘中导航，而禁用和笔记本电脑用户将不会感谢您。

然后当你使用'后退'按钮时，select元素处于错误的状态，指向你要去的页面而不是你来自的页面，这使得改变它的行为非常混乱（它可能重新加载当前页面，或无法加载新页面。）

此外，它会阻止浏览器提供有用的选项，例如“在新标签中打开”或“书签链接”，当它被卡在选择框后面时。

今天选择导航工具的习惯有点不可信。虽然您可以通过更复杂的脚本来修复它的一些缺陷，但您可能需要考虑使用带有简单链接的脚本化下拉式div。

Answer 2

window.location.assign(url);

Answer 3

脱离我的头顶：

<select id="month"></select>

var monthDrop = document.getElementById('month');

monthDrop.onchange = function() {
    var value = this.value, numericRep = parseInt( value, 10 );
    if ( !isNaN(numericRep) ) {
        location.href = 'http://sitename.com/calendar/' + value;
    }
}

Answer 4

<select onchange="javascript: location.href='/calendar/' + this.options[this.selectedIndex].value;">
...
</select>

Answer 5

<script>
function updateURL(obj) {
    window.location.assign("/calendar/" + obj.value);
    return true;
}
</script>
<select name="month" onchange="updateURL(this)">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  ...
  <option value="12">December</option>
</select>

Javascript DOM和下拉菜单

5 个答案: