Question

<select onchange ="----">
 <option value="a">a</option>
 <option value="b">b</option>
 <option value="c">c</option>
</select>

如果有人选择任何项目，我想写一小段代码wherien，那么它应该移动到显示正在选择什么值的下一个html页面。

我怎么能这样做..

希望我的怀疑是明确的

此处的任何建议都将受到赞赏......

谢谢..

Answer 1

所有表单字段都有form属性，您可以使用该属性轻松访问form元素以提交它。

您的name标记中还需要select属性，否则无效。

<select name="item" onchange="this.form.submit();">

或者，您可以通过设置窗口的位置转到另一个页面，在查询字符串中添加值：

<select onchange="window.location.href='NextPage.html?item='+this.options[this.selectedIndex].value;">

Answer 2

<select onchange="document.forms[0].submit();">

假设它是页面上的第一个表单（通常是这样）。如果不是，您可以将索引更改为正确的格式。

一个很好的参考是Introduction to Forms。

你当然可以使用像jQuery这样的库（我的首选选项），但这是严格可选的，因为它可以使用库存标准Javascript轻松完成。

Answer 3

您是否在寻找在用户浏览器或某些服务器端解决方案上运行的Javascript？你只是将其标记为“html”，因此不清楚“小代码”应该是什么编程语言......

Answer 4

onChange属性将接受javascript表达式或函数。因此，它取决于您想要做什么。如果您需要同一页面中下拉列表的值，则可以使用Javascript代码段访问它。

但是，如果您希望该值在后续页面（action属性指向的表单）上可用，则您需要在更改事件中提交表单。在这种情况下，您可以使用类似于@Cletus指出的内容。

Answer 5

<select onChange="redirect(this)">
<option value="html1.html" selected>1</option>
<option value="html2.html">2</option>
<option value="html3.html">3</option>
</select>

<script type="text/javascript">
function redirect(selSelectObject)
{
   if (selSelectObject.options[selSelectObject.selectedIndex].value != "")
   {
     location.href=selSelectObject.options[selSelectObject.selectedIndex].value
   }
}
</script>

我希望它会对你有所帮助。

Answer 6

您可以使用onchange元素中的select执行内联 Javascript ...但内联JS是一个坏习惯，应该避免使用。标记，即（X）HTML，应该是最小的和语义的，没有任何内联CSS或Javascript。最好尽可能多地将标记（HTML）与布局（CSS）和行为（Javascript）分开。

将您的Javascript保留在文档head中，或者更好地保存在head中调用的外部脚本中。这有利于保持标记清晰和最小化，并集中和外部化您的Javascript，从而促进代码重用和易于维护。

如果您没有Javascript经验，像jQuery这样的Javascript框架也会使事情变得更简单，更健壮。

另外，请注意这种方法（在select上进行更改）对于可访问性来说是一个糟糕的方法（尽管您在Web上的任何地方都可以看到它）。例如，许多仅限键盘的用户（包括大量手机）面临着可怕的情况，他们通过一次向上/向下移动列表一个选项来选择不同的选项......所以你的Javascript被踢了一次又一次地关闭，初始选项和新期望选项之间的每个选项一次。丑陋 - 如果您实际上使用onchange JS提交html表单，可能是这些用户的完整showstopper。

无论如何，你真的应该有一个单独的提交按钮（对于没有Javascript的用户，搜索机器人等）;在onchange JS中可能有一些值触发一些Ajax，但不要依赖它是用户提交选择的唯一方式。

Answer 7

我建议对于跨浏览器兼容性，您考虑将下拉列表与按钮组合以调用“转到”操作。某些浏览器，尤其是与辅助功能技术一起使用时，会在滚动该项目时触发选择的onchange。拥有onchange事件本身在这种情况下进行回发会适得其反。即使用户体验可能不是很好，但是当用户没有javascript以及用户使用辅助功能技术时，带按钮的选择会更加优雅地降级。如果您通过AJAX加载内容，这将不那么重要，因为选择，可能仍然会在那里进行交互。但是，对不同的页面进行完整的回发会使遇到此问题的用户感到沮丧。

帮助选择标签为html

7 个答案: